js生成二维码

js生成二维码

December 4, 2018

9908 views

2272 words

第一步：首先引入jquery.min.js和jquery.qrcode.min.js

   <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
   <script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

第二步：确定输入内容

<input type="text" id="con"> <button id="btn">生成</button>

第三步：生成二维码
第一种方式：canvas方式：

  在需要显示的地方

<div id="code"></div>

  
  第二步：生成
  ```
    $("#btn").click(function () {
        $('#code').qrcode( $("#con").val());
    })
  ```

第二方式：table方式：

  生成：
  ```
       $("#btn").click(function () {
    $("#code").qrcode({
        render: "table", 
        width: 200, 
        height:200, 
        text: $("#con").val() 
    });
    $('#code').qrcode( );
})
```

注意：中文的话，必须先转换为utf-8编码

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;
   }

示例代码：

 <!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
   <script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
</head>
<body>
<input type="text" id="con"> <button id="btn">生成</button>
<div id="code"></div>
</body>
</html>
<script>
   $("#btn").click(function () {
       $("#code").qrcode({
           render: "table",
           width: 200,
           height:200,
           text: toUtf8($("#con").val())
       });
       $('#code').qrcode( );
   })
   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>

js生成二维码