首页 > Javascript > jquery二维码生成插件jquery.qrcode.js详解
2019
06-03

jquery二维码生成插件jquery.qrcode.js详解

插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码。

官方文档地址:http://larsjung.de/jquery-qrcode/

github地址:https://github.com/lrsjng/jquery-qrcode 

官方demo:https://larsjung.de/jquery-qrcode/latest/demo/ 

微信截图_20190603164720.png

如何使用它

将jquery.qrcode.min.js和jquery添加到您的网页中

1

2

<script src="jquery.min.js"></script>

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

然后创建一个DOM元素去包含生成qr码。

1

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

然后你在此容器中的添加qrcode

1

2

3

4

5

<script>

    jQuery(function(){

    jQuery('#qrcode').qrcode("http://www.ttfde.top");

})

</script>

就这么简单,您想要的二维码就生成了。




 

进阶用法

指定二维码的生成方式:

可以在调用函数的同时输入想要的二维码生成方式(table/canvas)。

1

2

3

4

5

6

7

8

9

10

11

//使用table生成

jQuery('#qrcode').qrcode({

    render: "table",

    text: "http://www.ttfde.top"

});

 

//使用canvas生成

jQuery('#qrcode').qrcode({

    render: "canvas",

    text: "http://www.ttfde.top"

});

指定生成二维码的大小:

可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小。

1

2

3

4

5

6

7

//生成100*100(宽度100,高度100)的二维码

jQuery('#qrcode').qrcode({

    render: "canvas", //也可以替换为table

    width: 100,

    height: 100,

    text: "http://www.ttfde.top"

});

指定生成二维码的色彩样式:

可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式。

1

2

3

4

5

6

7

//生成前景色为红色背景色为白色的二维码

jQuery('#qrcode').qrcode({

    render: "canvas", //也可以替换为table

    foreground: "#C00",

    background: "#FFF",

    text: "http://www.ttfde.top"

});

中文ULR生成方法:

1

jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI进行转码

 附件为插件的压缩版本和非压缩版本

jquery.qrcode.rar


作者:admin
admin
TTF的家园-www.ttfde.top 个人博客以便写写东西,欢迎喜欢互联网的朋友一起交流!

本文》有 1 条评论

留下一个回复