Qrcode生成二维码（logo篇）之jquery.qrcode.min.js

Love The Way You Lie 2021-09-14 11:12 306阅读 0赞

[http://blog.csdn.net/gao36951/article/details/48975353][http_blog.csdn.net_gao36951_article_details_48975353]

## 首先要准备环境： ##

jquery-1.8.3\_min.js和jquery.qrcode.min.js   
jquery 版本可以自己选，由于qrcode的渲染方式render中的Canvas是html5的东西，所以会有兼容性问题，所以要想兼容好，就用table方式渲染。   
jquery.qrcode.min.js由于公司网络安全问题无法上传和拷贝文件，所以将代码粘贴如下，直接复制到一个txt文档中，重命名为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="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]

[http_blog.csdn.net_gao36951_article_details_48975353]: http://blog.csdn.net/gao36951/article/details/48975353
[20151008172311661]: /images/20210527/ffbe2edd674b455a8f606f27ce75f49e.png