基于jquery.qrcode.js插件生成二维码示例

由于jquery.qrcode.js是依赖于JQuery的,所以我们要先引入JQuery文件,再引入jquery.qrcode.js文件

  1. <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  2. <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

添加一个div标签,用于在该div区域内显示生成的二维码

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

最后开始写我们的js代码

  1. $("#qrcode").qrcode({
  2. render: "canvas", //生成二维码的方式(table||canvas)
  3. width: 256, //默认宽度
  4. height: 256, //默认高度
  5. foreground: "#000", //生成的二维码前景色
  6. background: "#FFF", //生成的二维码背景色
  7. typeNumber: -1, //计算模式默认为-1
  8. correctLevel: 2, //二维码纠错级别
  9. text: "http://www.xeblog.cn" //生成的二维码内容
  10. });

jquery.qrcode.js生成的二维码内容是不支持中文的,由于中文一般情况下是UTF-16的编码格式,如果想要生成中文内容则只需将中文的编码方式改成UTF-8的格式,下面的代码可以实现这一功能

  1. function toUTF8(str) {
  2. var out, i, len, c;
  3. out = "";
  4. len = str.length;
  5. for(i = 0; i < len; i++) {
  6. c = str.charCodeAt(i);
  7. if ((c >= 0x0001) && (c <= 0x007F)) {
  8. out += str.charAt(i);
  9. } else if (c > 0x07FF) {
  10. out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
  11. out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
  12. out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
  13. } else {
  14. out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
  15. out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
  16. }
  17. }
  18. return out;
  19. }

直接调用该方法即可

  1. text: toUTF8("小毅博客") //解决中文乱码

最后拿起手机扫一扫吧!

演示网站:在线生成二维码

项目开源地址

附送jquery.qrcode.js插件的下载地址


此条目是由 毅哥哥 发表在 记录 分类目录的 ,并贴了   标签

转载请注明作者和出处(小毅博客),并添加本页链接
原文链接: http://owexz.net/post/25

基于jquery.qrcode.js插件生成二维码示例》上有 0 条评论


必填项已用*标注