Home / Blog / it

JS生成二维码

Author: Vic.Wang 2017/08/09 Tags:jsjavascriptqrcode二维码生成二维码js二维码

近期用到使用JavaScript生成二维码,网上找了些插件,顺便整理下。

目前比较流行的有两种插件QRCode.jsjQuery.qrcode.js

QRCode.js

QRCode.js是一个生成二维码的JS库。

主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成。

不依赖其他JS库

使用方法:

        //生成二维码 && 配置
        var qrcode = new QRCode(element, {
            text: "Nalan Xue's Blog", //二维码内容
            width: 256, //二维码宽
            height: 256, //二维码高
            colorDark: '#000000', //前景色
            colorLight: '#ffffff', //背景色
            correctLevel: QRCode.CorrectLevel.H //容错界别
        });


        //清除代码
        qrcode.clear();

        //生成另外一个二维码
        qrcode.makeCode("http://mingsixue.com");
                    

参数correctLevel有4种值,分别是QRCode.CorrectLevel.L、QRCode.CorrectLevel.M、QRCode.CorrectLevel.Q、QRCode.CorrectLevel.H,代表的是容错界别。

源码下载:QRCode.min.js

github:qrcodejs

示例:

QRCode 二维码生成

jQuery.qrcode.js

使用方法:

        $('#code').qrcode({
            render: 'canvas', //两种模式,默认canvas,table
            width: 256,
            height:256,
            foreground: "#000", //前景色
            background: "#FFF", //背景色
            text: 'Nalan Xue'
        });
                    

jQuery.qrcode对中文的支持不好,需要处理一下再去生成二维码,例如下面的编码处理函数:

        //编码处理
        function toUtf8(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;
        }
                    

源码下载:jquery.qrcode.min.js

github:jquery-qrcode

示例:

jQuery qrcode 二维码生成

增强版jquery.qrcode

网上有人修改了jquery.qrcode的源码,使其支持插入logo,具体不多说,看下面教程。

利用JavaScript生成二维码并且中间有logo

源码下载

扩展阅读

二维码的基础原理是什么?

二维码的生成细节和原理