当前位置:首页 > 开发素材 > 正文内容

jQuery二维码生成插件jquery-qrcode

admin9年前 (2016-12-03)开发素材1537

现在,二维码在我们生活中出现的频率越来越高,购物、看电影等等很多地方都会用的。今天发现一款用jQuery生成二维码的小插件–jquery.qrcode.js,分享给大家。

jquery.qrcode.js是一款专门为浏览器生成二维码的jQuery小插件。它能让你方便的为网页添加二维码。它是独立的,gzip压缩后只有4k大小,并且不需要下载图片。它其实是通过使用jQuery实现图形渲染、画图,支持canvas(HTML5)和table两种方式,您可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码。

使用方法

1. 引入jQuery库文件及jquery-qrcode插件

1
2
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

2. 在页面中创建一个DOM元素,用来显示生成的二维码,比如我们创建下面的div:

1
<div id="qrcode"></div>

3. 调用 jquery-code 生成二维码

1
$('#qrcode').qrcode("http://huixing.org");

生成的二维码如下:

同时,jquery-code 还提供了一些其他参数,供我们定制不同的样式。默认参数如下,我们可以修改其值来生成不同样式的二维码。

1
2
3
4
5
6
7
8
9
10
$('#qrcode').qrcode({
    render: 'canvas', // 可选 "table" 和 "canvas"
    width: 256,
    height: 256,
    text: 'http://9iphp.com', //二维码内容
    typeNumber  : -1, //计算模式
    correctLevel    : 2, //纠错等级
    background      : "#ffffff", //背景颜色
    foreground      : "#000000" //前景颜色
});

4. 添加中文支持

其实上面的js有一个小小的缺点,就是默认不支持中文。这跟js的机制有关系,jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的,而这个方法默认会获取它的 Unicode 编码,一般的解码器都是采用UTF-8, ISO-8859-1等方式,英文是没有问题,如果是中文,一般情况下Unicode是UTF-16实现,长度2位,而UTF-8编码是3位,这样二维码的编解码就不匹配了。解决方式当然是,在二维码编码前把字符串转换成UTF-8,具体代码如下(参考来源):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function utf16to8(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;
}

之后,我们在生成二维码前,把要生成的字符串先转换下编码就可以了。如下:

1
$('#qrcode').qrcode(utf16to8("就爱PHP"));

最后附带一个 UTF-8 转 UTF-16 编码的js方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function utf8to16(str) {
    var out, i, len, c;
    var char2, char3;
  
    out = "";
    len = str.length;
    i = 0;
    while (i < len) {
        c = str.charCodeAt(i++);
        switch (c >> 4) {
            case 0:
            case 1:
            case 2:
            case 3:
            case 4:
            case 5:
            case 6:
            case 7:
                // 0xxxxxxx
                out += str.charAt(i - 1);
                break;
            case 12:
            case 13:
                // 110x xxxx   10xx xxxx
                char2 = str.charCodeAt(i++);
                out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
                break;
            case 14:
                // 1110 xxxx  10xx xxxx  10xx xxxx
                char2 = str.charCodeAt(i++);
                char3 = str.charCodeAt(i++);
                out += String.fromCharCode(((c & 0x0F) << 12) |
                    ((char2 & 0x3F) << 6) |
                    ((char3 & 0x3F) << 0));
                break;
        }
    }
  
    return out;
}


分享到:

扫描二维码推送至手机访问。

版权声明:本文由云河空间发布,如需转载请注明出处。

本文链接:https://yuyunhe.cn/index.php/post/206.html

分享给朋友:

“jQuery二维码生成插件jquery-qrcode” 的相关文章

ThinkPHP二级联动开发demo下载

ThinkPHP二级联动开发demo下载

ThinkPHP二级联动.zip...

iPhone/iPad/Android UI尺寸规范

iPhone/iPad/Android UI尺寸规范

iPhone界面尺寸设备分辨率PPI状态栏高度导航栏高度标签栏高度iPhone6 plus设计版1242×2208 px401PPI60px132px146pxiPhone6 plus放大版1125×2001 px401PPI54px132px146pxiPhone6 plus物理版1080×192...

php生成二维码的几种方式整理及使用实例

php生成二维码的几种方式整理及使用实例

本文整理了一些php生成二维码的方式:1.google开放api;2.php类库PHP QR Code;3.libqrencode;4.QRcode Perl CGI & PHP scripts感兴趣的朋友可以参考下哈1.google开放api 复制代码代码如下:$urlToEnc...

CSS3移入图片放大效果

CSS3移入图片放大效果引言我们有时看到一些网站有的照片,当我们将鼠标移入的时候,会有个放大的动画效果,今天我就来讲讲这个效果是如何实现的。demo最终实现效果:点击进入涉及知识点transform : scale()transition如何实现1Ps : demo 以 Webkit 为例,其它浏览...

HTML5离线存储之Application Cache

HTML5离线存储之Application Cache

关于html5的离线存储,大致可分为:localStorage, sessionStorageindexedDBweb sqlapplication cache可以在chrome的debug工具/Resources下产看,下面来着重说明一下Application Cache。访问流程当我们...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。