>> 知识广场

记录一个前端生成二维码的插件jquery.qrcode.js(JS前端开发)

分类：JS 作者：myerob 标签：前端 二维码 插件 jqueryqrcode JS 前端 开发 阅读：270 收藏
导读：
本期记录一个非常实用的前端动态生成二维码的插件jquery.qrcode.js，jquery.qrcode.js是一个能够在客户端生成矩阵二维码QRCode的jquery插件，使用它可以很方便的在页面…

本期记录一个非常实用的前端动态生成二维码的插件jquery.qrcode.js，jquery.qrcode.js是一个能够在客户端生成矩阵二维码QRCode的jquery插件，使用它可以很方便的在页面上生成二维码。

1、引入：将jquery.min.js和jquery.qrcode.min.js直接引入。

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

或CDN引入：

<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

2、创建 DOM ：创建一个 DOM 元素去包含生成 qr 码

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

3、生成二维码：在此容器中的添加 qrcode。

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

4、指定二维码的生成方式：

//使用table生成
jQuery('#qrcode').qrcode({
    render: "table",
    text: "https://www.23bei.com/"
});
//使用canvas生成
jQuery('#qrcode').qrcode({
    render: "canvas",
    text: "https://www.23bei.com/"
});

5、指定生成二维码的大小：

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

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

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

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

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

7、生成中文 ULR ：

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

 

 

相关推荐