使用jquery.qrcode.min.js实现前台二维码生成（带Logo）

向右看齐 2022-06-03 02:36 818阅读 0赞

### 一、准备环境：jquery-\*.\*.\*.js和jquery.qrcode.min.js  ###

jquery 版本可以自己选，由于qrcode的渲染方式render中的Canvas是html5，所以可能会有兼容性问题，所以要想兼容好，可使用table方式渲染。   
        jquery.qrcode.min.js可以自行下载，也可以粘贴下面代码，重命名为jquery.qrcode.min.js即可。

##  ##

###  二、普通实现（不带Logo） ###

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

## 效果图：从左至右浏览器依次为：火狐、IE8、google  ##

![这里写图片描述][20150925185805843]

### **三、带Logo实现（实际上就是通错CSS叠加一张前景图片）** ###

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

## 效果图：从左至右浏览器依次为火狐、IE8、google  ##

![这里写图片描述][20151008172311661]

[20150925185805843]: /images/20220603/cfac80d7ec2740cb8b089716135d9731.png
[20151008172311661]: /images/20220603/5d068499c6d3465fbc575168922ea1dd.png