jquery二维码生成插件jquery.qrcode.js，生成二维码并下载

下载插件：

在GitHub上，下载qrcode二维码插件： https://github.com/jeromeetienne/jquery-qrcode

Vue项目可直接通过node.js安装：npm install --save qrcode.vue（在项目根目录下通过cmd远行）

import QRCode from 'qrcodejs2'  // 引用插件

let qrcode = new QRCode(("qrcode"), { text: text, width: 140, height: 140}); // text 为内容
$("#qrcode").hide();  // 隐藏div，将二维码显示在img标签中。然后可用于下载图片
var canvas = $("canvas")[0];
$('#imgCanvas').attr('src',canvas.toDataURL('image/jpg'));  // imgCanvas为一个img标签

vue end

如何使用它

将jquery.qrcode.min.js和jquery添加到您的网页中

<script src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.qrcode.min.js"></script>

然后创建一个DOM元素去包含生成qr码。

<div id="qrcode"></div>

然后你在此容器中的添加qrcode

<script>

jQuery(function(){

jQuery('#qrcode').qrcode("http://www.jq22.com");

})

</script>

就这么简单，您想要的二维码就生成了。

进阶用法

指定二维码的生成方式：

可以在调用函数的同时输入想要的二维码生成方式（table/canvas）。

//使用table生成

jQuery('#qrcode').qrcode({

render: "table",

text: "http://www.jq22.com"

});

//使用canvas生成

jQuery('#qrcode').qrcode({

render: "canvas",

text: "http://www.jq22.com"

});

指定生成二维码的大小：

可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小。

//生成100*100(宽度100，高度100)的二维码

jQuery('#qrcode').qrcode({

render: "canvas", //也可以替换为table

width: 100,

height: 100,

text: "http://www.jq22.com"

});

//text 属性的值长度不能太长，最大字节数 10208

//text 字符串太长微信/支付宝等扫一扫无法识别，微博识别内容更多

//微博扫一扫：大约200 字以内，微信扫一扫：大约 160字以内，支付宝扫一扫：大约130字符以内

指定生成二维码的色彩样式：

可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式。

//生成前景色为红色背景色为白色的二维码

jQuery('#qrcode').qrcode({

render: "canvas", //也可以替换为table

foreground: "#C00",

background: "#FFF",

text: "http://www.jq22.com"

});

中文ULR生成方法:

jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI进行转

识别中文

我们试验的时候发现不能识别中文内容的二维码，通过查找多方资料了解到，jquery-qrcode是采用

charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码，如果有中文内容，

在生成二维码前就要把字符串转换成UTF-8，然后再生成二维码。您可以通过以下函数来转换中文字符串：

function toUtf8(str) {    
    var out, i, len, c;   out = "";  len = str.length;    
    for(i = 0; i < len; i++) {       c = str.charCodeAt(i);        
    	if ((c >= 0x0001) && (c <= 0x007F)) {          out += str.charAt(i);      }      else if (c > 0x07FF) {           out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));           out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));           out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));      } else {          out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));          out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));      }     }    
    return out;  }

以下示例：

var str = toUtf8("钓鱼岛是中国的！"); $('#code').qrcode(str);

将生成的二维码转换成图片格式：

<div id="divOne"></div>

<img id='imgOne'  style='border:1px solid red;'/>  

<script>  

//默认使用Canvas生成，并显示到图片   

 var qrcode= $('#divOne').qrcode('http://www.gongjuji.net/').hide();   

 var canvas=$('canvas')[0];  

 $('#imgOne').attr('src',canvas.toDataURL('image/jpg'))  

</script>

显示结果：

在当前的图片上添加文字或logo处理：

//默认使用Canvas画图
var qrcode = $('#code').qrcode({
    text: '@url',
    width: 400,
    height: 400
}).hide();
//添加文字
var text = "测试文字内容";//设置文字内容
var canvas = qrcode.find('canvas').get(0);
var oldCtx = canvas.getContext('2d');
var imgCanvas = document.getElementById('imgCanvas');
var ctx = imgCanvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.fillRect(0,0,imgCanvas.width,imgCanvas.height);
ctx.putImageData(oldCtx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);
ctx.fillStyle = 'red';
ctx.strokStyle = 'rgb(1,1,0)';
//ctx.stroke = 3;
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.font = 'bolder 30px Helvetica';
ctx.fillText(text, imgCanvas.width / 2, imgCanvas.height - 20);
ctx.strokeText(text, imgCanvas.width / 2, imgCanvas.height - 20);
imgCanvas.style.display = 'none';
$('#imgCode').attr('src', imgCanvas.toDataURL('image/png')).css({
    maxWidth:300
});

下载图片：

function download(){
	var data = $("canvas")[0].toDataURL().replace("image/png", "image/octet-stream;");//获取二维码值，并修改响应头部。　　　
	var filename="tupian.png";//保存的图片名称和格式，canvas默认使用的png格式。这个格式效果最好。
	var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
	save_link.href = data;
	save_link.download = filename;
	var event = document.createEvent('MouseEvents');
	event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	save_link.dispatchEvent(event);
}

怎么重新生成二维码; 一个div重复调用qrcode会错位

在生成之前把这个div 清空就好了

怎样在二维码的中间加入头像呢，有没有大神知道的

css设置个div浮动层，让它浮在二维码上剧中就行了