jquery.qrcode.js实现前端生成二维码

来源：网络文章列表 2022-09-26 8

前端js使用jquery.qrcode.js来生成二维码，并且设置容错参数，让扫码更简单。

应该很多人都用过jquery.qrcode来生成二维码，生成代码确实很简单demo代码如下

<!DOCTYPE html>
<html>
<head>
<title>basic example</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

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

<p>Render in table</p>
<div id="qrcodeTable"></div>
<p>Render in canvas</p>
<div id="qrcodeCanvas"></div>
<script>
    //jQuery('#qrcode').qrcode("this plugin is great");
    jQuery('#qrcodeTable').qrcode({
        render  : "table",
        text    : "http://jetienne.com"
    }); 
    jQuery('#qrcodeCanvas').qrcode({
        text    : "http://jetienne.com"
    }); 
</script>

</body>
</html>

调用了三个js脚本，jquery.js、jquery.qrcode.js 和qrcode.js 。jquery当然是少不了的了，后两个可以在项目src目录下找到，应该是项目的源文件。也可以包含一个压缩文件来代替jquery.qrcode.min.js

调用代码只有三行，真的很简洁，但是问题也随之而来，二维码容错怎么设置？这个参数是二维码里最重要的参数。

我们的终端都可以清晰的显示二维码，为了让用户扫码更快，我们都选用的最低容错级别。而jquery.qrcode很明显用的是高甚至是最高的容错（对比草料）。

没办法只能阅读源码了

//jquery-qrcode/src/jquery.qrcode.js

    $.fn.qrcode = function(options) {
        // if options is string, 
        if( typeof options === 'string' ){
            options = { text: options };
        }

        // set default values
        // typeNumber < 1 for automatic calculation
        options = $.extend( {}, {
            render      : "canvas",
            width       : 256,
            height      : 256,
            typeNumber  : -1,
            correctLevel    : QRErrorCorrectLevel.H,//原来在这里默认了最高级别 吼吼
                        background      : "#ffffff",
                        foreground      : "#000000"
        }, options);

//jquery-qrcode/src/qrcode.js
//---------------------------------------------------------------------
// QRErrorCorrectLevel
//---------------------------------------------------------------------
//容错级别对象
var QRErrorCorrectLevel = {
    L : 1,
    M : 0,
    Q : 3,
    H : 2
};

看了上面的代码明白了，还有一个容错参数correctLevel，记不住QRErrorCorrectLevel 对象的话，直接配0 1 2 3数值就行，看你的需求了

//那么我的项目应该这么配置
jQuery('#qrcodeCanvas').qrcode({
        render      : "canvas",
        width       : 256,
        height      : 256,
        typeNumber  : -1,
        correctLevel    : 1
    });

腾讯云限量秒杀

1核2G 5M 50元/年 2核4G 8M 74元/年 4核8G 5M 818元/年 CDN流量包 100GB 9元