关于二维码生成——js生成

最新推荐文章于 2024-09-14 16:29:27 发布

Mi咕噜

最新推荐文章于 2024-09-14 16:29:27 发布

阅读量75

点赞数

分类专栏：前端文章标签： js二维码生成

本文链接：https://blog.youkuaiyun.com/qq_35354260/article/details/83062828

版权

前端专栏收录该内容

11 篇文章

订阅专栏

关于二维码生成除了java后端生成还有就是js生成

①Canvas方式渲染 jquery.qrcode.js小案例

**需要引入 jquery.qrcode.min.js

  <!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <script type="text/javascript" src="../jquery-1.8.3_min.js"></script>
       <script type="text/javascript" src="../jquery.qrcode.min.js"></script>
   </head>
   <title>Canvas方式渲染</title>
   <script type="text/javascript">
       function generateQRCode(rendermethod, picwidth, picheight, url) {
           $("#qrcode").qrcode({
               render: rendermethod, // 渲染方式有table方式（IE兼容）和canvas方式
               width: picwidth, //宽度
               height: picheight, //高度
               text: url, //内容 http://www.baidu.com
               typeNumber: -1, //计算模式
               correctLevel: 2, //二维码纠错级别
               background: "#ffffff", //背景颜色
               foreground: "#000000" //二维码颜色
           });
       }

//初始化方法调用
       function init() {
           generateQRCode("table", 200, 200, "test");
       }
   </script>
   </head>
   <body onLoad="init()">
       <h1>Qrcode</h1>
       <div id="qrcode"></div>
   </body>
</html>

②Table 方式渲染 qrcode.js 实战小例子

<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <script type="text/javascript" src="qrcode.js"></script>
   </head>
   <body>
       <input id="text" type="text" value="http://www.baidu.com" /><br/>
       <div id="qrcode"></div>
       <script type="text/javascript">
           var qrcode = new QRCode("test", {
               text: "http://www.baidu.com", //二维码内容
               width: 128, //图像宽度
               height: 128, //图像高度
               colorDark: "#000000", //前景色
               colorLight: "#ffffff", //背景色
               correctLevel: QRCode.CorrectLevel.H
                   /*
                   容错级别，可设置为
                   QRCode.CorrectLevel.L
                   QRCode.CorrectLevel.M
                   QRCode.CorrectLevel.Q
                   QRCode.CorrectLevel.H
                   */
           });
       </script>
   </body>
</html>

③ 本地一个小例子把页面的路径生成二维码

var rewmUrl=window.location.href;//当前打开页面的url
var realPath=toUtf8(rewmUrl);
$("#code").qrcode(realPath);//js生成二维码

function toUtf8(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>

<div>

<div id="code" style="margin-top: 50px;text-align:center"> <p >手机扫描二维码答题</p> </div>

</div>
</body>
</html>