URL 生成带文字二维码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
<div id="QRcode"></div>
<a class="QR-download" href="#" download>下载</a>
<script src="http://www.wangyulue.com/assets/js/qrcode.js"></script>
<script src="http://www.wangyulue.com/assets/js/html2canvas.min.js"></script>
<script>
/**
* 输出一个带有文字说明的二维码。
*
* @param {Object} obj 相关配置，
* obj = {
dom : "QRcode", //
url : "http://www.wangyulue.com", //二维码网址
text : ["王玉略的个人网站","Stay Hungry, Stay Foolish."], //二维码的文字说明
pic_size : 300, // 图片的尺寸大小
font_size : 16, //说明文字的字体大小
}
* 回调函数中返回一个base64形式的图片，以便在回调中注入到<a>标签中下载使用
*
*/
function getQRcodeImg(obj,fn){
var url = obj.url,
size = obj.pic_size || 256;
font_size = obj.font_size || 18;
dom = document.getElementById(obj.dom);
dom.innerHTML = generateHTML(obj.text,size,font_size);
var $qrcode = dom.getElementsByClassName("QR-qrcode")[0],
$main = dom.getElementsByClassName("QR-main")[0];
new QRCode($qrcode, {
text: url,
width: size,
height: size,
});
html2canvas($main).then(function(canvas) {
var base64 = concatCanvas(dom,$qrcode.getElementsByTagName("canvas")[0],canvas,20);
fn && fn(base64);
});
/**
* 根据配置拼凑要处理的html代码
*
* @param {Array} arr 要添加的文字，以数组传入
*
*/
function generateHTML(arr,size,font_size){
var out = "",temp = "";
arr.forEach(function(item){
temp += "<div style='text-align:center;font-size:" +font_size+ "px;'>"+ item +"</div>" ;
})
out =
"<div style='position:absolute;opacity:0;'>" +
"<div class='QR-main' style='width: " +size+ "px;'>" +
temp +
"</div>" +
"</div>" +
"<div class='QR-qrcode' style='display:none;'></div>";
return out ;
}
/**
* 将两个canvas合并在一起
*
* @param {Object} dom canvas要添加的dom对象
* @param {Object} canvas1 第一个canvas
* @param {Object} canvas2 第二个canvas
* @param {Number} padding 图片的padding，默认20
* @return {String} 返回base64字符串
*
*/
function concatCanvas(dom,canvas1,canvas2,padding){
var c1h = canvas1.height,
c1w = canvas1.width,
// c2h = canvas2.height,
// c2w = canvas2.width,
/* 说明：将以上两行代码改为以下两行代码；
* 原因：以上两行代码在window下显示是好的，但是放到Mac下显示会出一些问题，
* 仔细发现是在Mac下,html2canvas的API返回的canvas不符合预期，在MAC环境canvas返回如下：
* html2canvas($main).then(function(canvas) {
* console.log(canvas); //<canvas width="600" height="88" style="width: 300px; height: 44px;"></canvas>
* });
* 可以看到看到canvas的width和height值和其style里的width和height的值有所不同，
* 于是采用以下的方法来获得canvas的宽度和高度
* 王二认为出现以上问题可能是因为分辨率的问题
*/
c2h = Number(canvas2.style.height.slice(0,-2));
c2w = Number(canvas2.style.width.slice(0,-2));
canvas = document.createElement("canvas");
padding = padding || 20 ;
/** 根据二维码、文字两个canvas，再加上padding计算出新的canvas的宽度和高度 **/
canvas.height = c1h + c2h + 2.5 * padding ;
canvas.width = Math.max(c1w,c2w) + 2 * padding ;
/** end **/
dom.appendChild(canvas);
/** 将canvas画上白色背景 **/
context = canvas.getContext("2d");
context.fillStyle ="white";
context.fillRect(0,0,canvas.width,canvas.height);
/** end **/
/** 将二维码、文字两个canvas绘画到一个canvas里 **/
context.drawImage(canvas1, padding, padding, c1w ,c1h);
context.drawImage(canvas2, padding, 1.5 * padding+c1h, c2w ,c2h);
/** end **/
/** 返回base64,用于注入到a标签里以便下载 **/
return canvas.toDataURL('image/jpeg',1);
/** end **/
}
}
var obj = {
dom : "QRcode",
url : "http://www.wangyulue.com",
text : ["王玉略的个人网站","Stay Hungry, Stay Foolish."],
pic_size : 300,
font_size : 16,
}
getQRcodeImg(obj,function(base64){
document.getElementsByClassName("QR-download")[0].href = base64 ;
}); </script>
</body>
</html>
效果：
URL 生成带文字二维码的更多相关文章
- 微信公众号开发C#系列-11、生成带参数二维码应用场景
1.概述 我们在微信公众号开发C#系列-7.消息管理-接收事件推送章节有对扫描带参数二维码事件的处理做了讲解.本篇主要讲解通过微信公众号开发平台提供的接口生成带参数的二维码及应用场景. 微信公众号平台 ...
- thinkphp使用phpqrcode生成带logo二维码
//二维码图片保存路径 $pathname = date("Ymd",time()); $pathname = "./Qrcode/" . $pathname; ...
- QRCode 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式
目录 功能介绍 常见问题 效果图与示例 apk Gradle 依赖 布局文件 自定义属性说明 接口说明 关于我 功能介绍 根据之前公司的产品需求,参考 barcodescanner 改的,希望能帮助到 ...
- php生成带参数二维码
1.PHPqrCode是一个PHP二维码生成类库,利用它可以轻松生成二维码,官网提供了下载和多个演示demo, https://sourceforge.net/projects/phpqrcode/ ...
- Java生成带logo二维码
目前生成二维码的方式有很多种,本例采用谷歌的zxing,去白边,添加logo等处理均在代码中有注释 demo连接 https://github.com/littlechaser/qrcode.git
- C#生成带Logo二维码
1.下载ThoughtWorks.QRCode引用并添加在工程中2.在实现类QRCodeEncoderDemo中引入Dll,添加方法 using System; using System.Collec ...
- python生成带参数二维码
#coding:utf8 import urllib2 import urllib import json import string import random class WebChat(obje ...
- PHP批量生成底部带编号二维码(二维码生成+文字生成图片+图片拼接合并)
PHP批量生成带底部编号二维码(二维码生成+文字生成图片+图片拼接合并) 需求: 输入编号如 : cb05-0000001 至 cb05-0000500 批量生成 以编号为名称的下图二维码,然后压缩 ...
- PHP生成小程序二维码合成图片生成文字
这部分代码是写在项目上的代码,THINKPHP3.1如果迁移到其他的地方应该要稍稍改动一下以适合自己的项目 function get_bbox($text,$fsize,$ffile){ return ...
随机推荐
- 【开发者笔记】利用shp2pgsql将shape文件导入到postgresql中
导入shp文件到postgresql中 1.首先,你需要让shp2pgsql命令可用,百度下载,加入环境变量即可. 下载地址:https://download.osgeo.org/postgis/wi ...
- [golang note] 接口使用
侵入式接口 √ 在其他一些编程语言中,接口主要是作为不同组件之间的契约存在,即规定双方交互的规约. √ 对契约的实现是强制的,即必须确保用户的确实现了该接口,而实现一个接口,需要从该接口继承. √ 如 ...
- Spring笔记一
什么是Spring spring (由rod johnson创建的一个开源框架) spring是一个开源框架,spring是于2003 年兴起的一个轻量级的java 开发框架,由rod johnson ...
- Rails的HashWithIndifferentAccess
ruby 2.0 引入了keyword arguments,方法的参数可以这么声明 def foo(bar: 'default') puts bar end foo # => 'default' ...
- android中代码操作外部SD卡出错：W/System.err(1595): Caused by: libcore.io.ErrnoException: open failed: EACCES (Permission denied)
AndroidManifest.xml 中加上: <uses-permission android:name="android.permission.WRITE_EXTERNAL_ST ...
- STM32F105 USB管脚Vbus的处理
源:STM32F105 USB管脚Vbus的处理 对于STM32F105/107来说,为了监测USB的连接问题,程序默认是通过Vbus管脚进行检查的.但是Vbus管脚和UART1的TXD复用,导致我们 ...
- Vue学习笔记之计算属性和侦听器
0x00 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split(''). ...
- 20145221 《Java程序设计》实验报告一：Java开发环境的熟悉（Windows+IDEA）
20145221 <Java程序设计>实验报告一:Java开发环境的熟悉(Windows+IDEA) 实验要求 使用JDK编译.运行简单的Java程序: 使用IDEA 编辑.编译.运行.调 ...
- A8几种内存
1.SD卡(程序可写入,当成最次硬盘来用) 2.nandflash(程序可写入,当成一般硬盘来用) 3.DDR2(当A8板子的内存条来用)
- Dekker算法在多核处理器下的失效
Dekker algorithm是一种著名的并发编程的算法,Dekker算法的核心部分是一组对称的代码来访问一组共享变量,使得两个线程不可能同时进入临界区(只要cpu内存模型是遵循顺序一致性的),从而 ...