使用jQuery的插件juqery.qrcode.js生成二维码

学习笔记 马富天 2016-07-19 15:16:40 80 0

【摘要】juqery.qrcode.js是jQuery在线生成二维码插件,此JS特效基于HTML5的一些特效,如Canvas绘图,因此浏览的浏览器需要支持HTML5特性,插件支持自定义LOGO功能,支持文字和图片两种模式,支持自定义LOGO位置、支持自定义二维码颜色、背景颜色、错误纠正模式、二维码圆滑度,非常强大的自定义功能,能够快速的打造你漂亮的二维码图片,非常不错的jQuery插件,值得学习和使用。

jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码。 此插件是能够独立使用的,体积也比较小,使用gzip压缩后才不到4kb。

一、生产非图片的二维码

需要的js库:jquery-1.8.3.min.js、jquery.qrcode.min.js

插件下载地址:百度搜索可以找到很多

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>jquery.qrcode.js生成非图二维码</title>  
  5.         <script type="text/javascript" src="jquery-1.8.3.min.js"></script>  
  6.         <script type="text/javascript" src="jquery.qrcode.min.js"></script>      
  7.         <meta charset="utf-8" />
  8.     <head>  
  9.         <script type="text/javascript">   
  10.             function generateQRCode(rendermethod, picwidth, picheight, url) {  
  11.             $("#qrcode").qrcode({   
  12.                     render: rendermethod, // 渲染方式有table方式(IE兼容)和canvas方式  
  13.                     width: picwidth, //宽度   
  14.                     height:picheight, //高度   
  15.                     text: utf16to8(url), //内容   
  16.                     typeNumber:-1,//计算模式  
  17.                     correctLevel:2,//二维码纠错级别  
  18.                     background:"#ffffff",//背景颜色  
  19.                     foreground:"#000000"  //二维码颜色  
  20.           
  21.                 });  
  22.             }  
  23.             function init() {  
  24.                 generateQRCode("table",200, 200, "http://www.numberer.net/");  
  25.             }  
  26.             //  中文编码格式转换  
  27.             function utf16to8(str) {  
  28.                 var out, i, len, c;  
  29.                 out = "";  
  30.                 len = str.length;  
  31.                 for (i = 0; i < len; i++) {  
  32.                     c = str.charCodeAt(i);  
  33.                     if ((c >= 0x0001) && (c <= 0x007F)) {  
  34.                         out += str.charAt(i);  
  35.                     } else if (c > 0x07FF) {  
  36.                         out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
  37.                         out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));  
  38.                         out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));  
  39.                     } else {  
  40.                         out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));  
  41.                         out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));  
  42.                     }  
  43.                 }  
  44.                 return out;  
  45.             }      
  46.         </script>  
  47.     </head>  
  48.     <body onLoad="init()">  
  49.         <h1>非图片二维码生成</h1>  
  50.         <div id="qrcode"></div>  
  51.     </body>  
  52. </html>

二、生产图片二维码

需要的js库:jquery-1.8.3.min.js、excanvas.compiled.js、jquery.qrcode.min.js

插件下载地址:excanvas.compiled.js在网上是可以下载到的

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />
  5.         <title>jquery.qrcode.js生成图片二维码</title>  
  6.         <script type="text/javascript" src="jquery-1.8.3.min.js"></script>  
  7.         <script type="text/javascript" src="excanvas.compiled.js"></script>  
  8.         <script type="text/javascript" src="jquery.qrcode.min.js"></script>          
  9.     <head>  
  10.         <script type="text/javascript">   
  11.         function generateQRCode(rendermethod, picwidth, picheight, url) {  
  12.       
  13.             $("#qrcode").qrcode({   
  14.                 render: rendermethod, // 渲染方式有table方式(IE兼容)和canvas方式  
  15.                 width: picwidth, //宽度   
  16.                 height:picheight, //高度   
  17.                 text: utf16to8(url), //内容   
  18.                 typeNumber:-1,//计算模式  
  19.                 correctLevel:2,//二维码纠错级别  
  20.                 background:"#ffffff",//背景颜色  
  21.                 foreground:"#000000"  //二维码颜色  
  22.       
  23.             });  
  24.         }  
  25.         function init() {  
  26.             generateQRCode("table",200, 200, "http://www.numberer.net/");  
  27.             var margin = ($("#qrcode").height()-$("#codeico").height())/2;  
  28.             $("#codeico").css("margin",margin);  
  29.         }  
  30.         //中文编码格式转换  
  31.         function utf16to8(str) {  
  32.             var out, i, len, c;  
  33.             out = "";  
  34.             len = str.length;  
  35.             for (i = 0; i < len; i++) {  
  36.                 c = str.charCodeAt(i);  
  37.                 if ((c >= 0x0001) && (c <= 0x007F)) {  
  38.                     out += str.charAt(i);  
  39.                 } else if (c > 0x07FF) {  
  40.                     out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
  41.                     out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));  
  42.                     out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));  
  43.                 } else {  
  44.                     out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));  
  45.                     out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));  
  46.                 }  
  47.             }  
  48.             return out;  
  49.         }     
  50.       
  51.         </script>  
  52.       
  53.         <style type="text/css">  
  54.             #codeico{  
  55.                 //生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom"
  56.                 position:fixed;
  57.                 z-index:9999999;  
  58.                 width:30px;   
  59.                 height:30px;  
  60.                 background:url("./1.png") no-repeat;  
  61.             }  
  62.         </style>  
  63.     </head>  
  64.     <body onLoad="init()">  
  65.         <h1>有图二维码生成</h1>  
  66.         <div id="qrcode">  
  67.             <div id="codeico"></div>  
  68.         </div>        
  69.     </body>  
  70. </html>

版权归 马富天PHP博客 所有

本文标题:《使用jQuery的插件juqery.qrcode.js生成二维码》

本文链接地址:http://www.mafutian.net/164.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 javascript中prompt()方法弹出输入框的使用示例 》 下一篇《 Hadoop入门经典运行wordcount 》

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多