前端生成二维码(qrcode.js&jquery.qrcode.min.js )使用小结

qrcode.js&jquery.qrcode.min.js使用小结

1. js文件及说明

qrcode.js : 是一个纯浏览器用于生成二维码图片的插件，生成的 QRcode 无需下载图片，并且不依赖第三方服务,下面插件使用的是压缩版本，大小不超过4K
jquery.qrcode.js : 是实现二维码数据计算的核心类

qrcode.js生成的二维码是图片格式 img
jqurey.qrcode.js 生成的二维码是canvas或table

传送门–>走你---------------1积分

2. jquery.qrcode.js 使用说明

$('#qrcode').qrcode({
   	render: "canvas",//设置渲染方式(有两种方式 table和canvas，默认是canvas）  
    text: '内容',
    width: 100, //二维码宽
    height: 100, //二维码长
    background: "#ffffff",//背景颜色  
    foreground: "#000000", //前景颜色
    correctLevel :0,//纠错等级 
});

参数说明:

• render : 生成二维码的格式(canvas和table)
  – canvas 是画布
  – table是表格(每个点是一个td…感觉会是一个很大的表…)
• text :二维码内容(不支持中文…据说是UTF-16格式的编码,中文的话需要转换下, 要不然是乱码)
• width : 二维码宽度
• height : 二维码高度
• foreground : 前景颜色,也就是常规二维码 “黑点” 的颜色
• background : 背景颜色, 也就是常规二维码白色部分的颜色
• correctLevel : 容错等级 0~3
  – 数值越大容错率越高, 相应的 “点” 也就越多, 但相对的二维码就越容易(被遮挡等情况下)被识别

中文支持代码 : utf16 -> utf8

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;
}

生成 canvas 格式的二维码打印不识别, 打印不了二维码, 需要转换成img格式
转换方式 :

//获取canvas
//切记此处获取的应该是一个js对象, 而不是jQuery对象
//因为后面的 toDataURL() 方法是js对象的方法, jQurey对象会不识别该方法
var mycanvas = document.getElementsByTagName('canvas')[0]
//或 $("canvas")[0] 方法很多, 不一一列举了

//将获取的对象传给处理方法
var img=convertCanvasToImage(mycanvas);

//将获取的图片放到想要放的位置
$("#imagQrDiv").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;
}

3. qrcode.js 使用说明

var qrcode = new QRCode ( 'qrcode', {
	text: '内容',
	width: 200,
	height: 200,
	colorDark : '#000000' , //前景色
	colorLight : ' #ffffff ' , //背景色
	correctLevel : QRCode.CorrectLevel.H  //纠错等级
});

参数说明 :

• text :二维码的内容, 支持中文(UTF-8)
• width : 二维码宽度
• height : 二维码高度
• colorDark :前景色,也就是通常二维码的 “黑点” 的颜色
• colorLight :背景色, 也就是通常二维码白色的部分的颜色
• correctLevel :纠错等级
  – correctLevel : QRErrorCorrectLevel.L, （7%）
  –correctLevel : QRErrorCorrectLevel.M, （15%）
  –correctLevel : QRErrorCorrectLevel.Q, （25%）
  –correctLevel : QRErrorCorrectLevel.H, （30%）
  同理, 容错率越高,相应的 ‘黑点’ 就越多, 但相对的二维码就越容易(被遮挡等情况下)被识别

方法 :
可以使用 qrcode.makeCode("新内容") 来更新二维码的内容
可以使用 qrcode.clear() 来清除二维码 (据说只对 不支持 canvas的浏览器生效)

文章参考 : 博客园-小梨晓晓