关闭

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元

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论