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

时间:2023-07-14 09:42:22来源:互联网

下面小编就为大家分享一篇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
    });

 

本站部分内容转载自互联网,如果有网站内容侵犯了您的权益,可直接联系我们删除,感谢支持!