QRCode.js二维码生成并能长按识别

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

首先引入QRCode.js文件，下载地址

如果生成二维码的信息是固定不变的，那么当然不需要如此这般，网上有好多现成的二维码生成器，直接用就好。

可是，我的需求是这样的，二维码用于在微信或QQ中分享，根据不同的用户信息分别生成不同的二维码，这样就不能偷懒，就得用代码生成了，并且生成的二维码支持长按识别进入。

话不多说，直接上干货：

html部分：

<div id="codeBox">
 <div id="qrDiv" style="display: none;"></div>
 <div id="qrcode"></div> 
</div>

js部分：实例化并进行参数设置：

var user_id="" //用户ID
user_id=getQueryString('user_id'); //获取user_id参数
var url= '' //请求url
 $(function(){
 //生成二维码
 var downUrl=url+user_id;
 var qrcode = new QRCode("qrDiv", {
 text: utf16to8(Url),
 render: "canvas", //渲染方式有table方式（IE兼容）和canvas方式
 width: 128,
 height: 128,
 typeNumber:-1,//计算模式
 colorDark : "#000000", //前景色
 colorLight : "#ffffff", //背景色
 correctLevel : QRCode.CorrectLevel.H //容错级别
 });
 var mycanvas1=document.getElementsByTagName('canvas')[0];
 //将转换后的img标签插入到html中 
 var img=convertCanvasToImage(mycanvas1); 
 $('#qrcode').append(img);//imagQrDiv表示你要插入的容器id 
 })

 //从 canvas 提取图片 image 
 function convertCanvasToImage(canvas) { 
 //新Image对象，可以理解为DOM 
 var image = new Image(); 
 // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持 
 // 指定格式 PNG 
 image.src = canvas.toDataURL("image/png"); 
 return image; 
 } 

 //获取请求参数值
 function getQueryString(name) {
 var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
 var r = window.location.search.substr(1).match(reg);
 if (r != null) {
 return unescape(r[2]);
 }
 return null; 
 }

 //中文编码格式转换
 function utf16to8(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;
 }