js 生成二维码

Posted 2020-09-10 haonanElva

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

如何使用它

将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

 jQuery(‘#qrcode‘).qrcode("http://www.jq22.com");

【进阶用法】

指定二维码的生成方式：

可以在调用函数的同时输入想要的二维码生成方式（table/canvas）。也就是在一定的条件下生成相应的二维码

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

指定生成二维码的大小：

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

//生成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"
});