qrcode.js是什么？ 

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

浏览器兼容情况

支持该库的浏览器有：IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等。  

qrcode.js生成二维码

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://www.runoob.com");  // 设置要生成二维码的链接
</script>

或者使用一些可选参数设置：

var qrcode = new QRCode("test", {
    text: "http://www.runoob.com",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

同样我们可以使用以下方法：

qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码

qrcode.js解析识别二维码

通过文件的形式获取到本地的图片，生成一个图片的临时路径，然后解析这个二维码图片；qrcode.decode(img)方法能将二维码图片解析，通过qrcode.callback=function(img){}将解析的图片返回文本值；
//获取预览图片路径
var getObjectURL = function(file){
    var url = null ; 
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}

console.log(getObjectURL(newfile[0]));// newfile[0]是通过input file上传的二维码图片文件
qrcode.decode(getObjectURL(newfile[0]));
qrcode.callback = function(imgMsg){
    console.log("imgMsg",imgMsg);
}

qrcode.js参数说明
new QRCode(element, option)
名称
默认值
说明
element
-
显示二维码的元素或该元素的 ID
option
 
参数配置
option 参数说明
名称
默认值
说明
width
256
图像宽度
height
256
图像高度
colorDark
"#000000"
前景色
colorLight
"#ffffff"
背景色
correctLevel
QRCode.CorrectLevel.L
容错级别，可设置为：
QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H
api 接口
名称
说明
makeCode(text)
设置二维码内容
clear()
清除二维码。（仅在不支持 Canvas 的浏览器下有效）

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/708