黑马程序员技术交流社区

标题: 【广州前端】jQuery-qrcode二维码生成插件 [打印本页]

---

作者: 李盼盼老师    时间: 2018-1-11 14:50
标题: 【广州前端】jQuery-qrcode二维码生成插件

查看更多精彩前端资源

【简介】

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

【使用步骤】

普通用法

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

[HTML] 纯文本查看 复制代码

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



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

2.  然后创建一个DOM元素去包含生成QRCode二维码码

[HTML] 纯文本查看 复制代码

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

3.  初始化

[JavaScript] 纯文本查看 复制代码

<script>



$(function(){



    $('#qrcode').qrcode("http://bbs.itheima.com/forum.php?mod=viewthread&tid=386119&extra=");



})



</script>

  进阶用法

•     指定二维码的生成方式
  

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

  

[JavaScript] 纯文本查看 复制代码

  //使用table生成

jQuery('#qrcode').qrcode({

       render: "table",

       text: " http://bbs.itheima.com/forum.php ... d=386119&extra="

});

//使用canvas生成

jQuery('#qrcode').qrcode({

       render: "canvas",

       text: " http://bbs.itheima.com/forum.php ... d=386119&extra="

});

• 指定生成二维码的大小
  

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

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

jQuery('#qrcode').qrcode({

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

    width: 100,

    height: 100,

    text: " http://bbs.itheima.com/forum.php ... d=386119&extra="

});

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

[JavaScript] 纯文本查看 复制代码

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



jQuery('#qrcode').qrcode({



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



    foreground: "#C00",



    background: "#FFF",



    text: " http://bbs.itheima.com/forum.php ... d=386119&extra="



});

• 中文ULR生成方法
  

如果你对url地址中带有中文，那么建议使用encodeURI进行转码

[JavaScript] 纯文本查看 复制代码

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

【案例演示】

   

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2