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

下载地址 jquery.qrcode.js

 

如何使用它

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

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

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

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

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

<script>
    $(function(){
        $('#qrcode').qrcode("https://www.baidu.com");
    })
</script>

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

进阶用法

指定二维码的生成方式：

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

//使用table生成
jQuery('#qrcode').qrcode({
    render: "table",
    text: "http://www.jq22.com"
});


//使用canvas生成
jQuery('#qrcode').qrcode({
    render: "canvas",
    text: "http://www.jq22.com"
});

table、canvas 两种生成二维码方式的区别

canvas方式生成的实际是一张图片，而table方式生成的则是由html的<table>标签通过控制细密的单元格背景色的黑白来组成的二维码，一个点就是一个单元格。canvas方式生成的可直接以图片格式保存，而table的不能。canvas的容易放大失真，table的不易失真。实际应用就看需求了，只是需要显示name两者皆可，若需要利于保存，则canvas的较为方便。

参考(https://blog.csdn.net/zx0717zx/article/details/53379212)

 

指定生成二维码的大小：

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

//生成100*100(宽度100，高度100)的二维码
jQuery('#qrcode').qrcode({
    render: "canvas", //也可以替换为table
    width: 100,
    height: 100,
    text: "http://www.jq22.com"
});

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

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

//生成前景色为红色背景色为白色的二维码
jQuery('#qrcode').qrcode({
    render: "canvas", //也可以替换为table
    foreground: "#C00",
    background: "#FFF",
    text: "http://www.jq22.com"
});

中文ULR生成方法:

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