Home >Web Front-end >JS Tutorial >How to generate QR code in js? How to generate QR code using js (code)

How to generate QR code in js? How to generate QR code using js (code)

不言
不言Original
2018-08-23 13:57:576177browse

The content of this article is about how to generate QR code with js? The method (code) of generating QR code with js has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Generate QR code in js

1. Preparation work

First you need to prepare dependent resources
1, jquery.js
2. qrcode (https://github.com/jeromeetienne/jquery-qrcode)

2. Reference method

html<script type="text/javascript" src="jquery.qrcode.min.js"></script> 
或js 
require("yourPath/jquery-qrcode-master/jquery.qrcode.min");

3. Page display

<div id="qrcode"></div>

4.js Processing

$(&#39;#qrcode&#39;).qrcode("www.baidu.com");//当二维码内容中涉及到中文时,需要先转换为utf8
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;    
 };//内容扩展$("qrcode").qrcode(
    text : "这里放二维码的内容,涉及中文时需要转换为utf8"  //设置二维码内容  
    render : "canvas",//设置渲染方式  
    width : 256,     //设置宽度,默认生成的二维码大小是 256×256
    height : 256,     //设置高度  
    typeNumber : -1,      //计算模式  
    correctLevel : QRErrorCorrectLevel.H,//纠错等级  
    background : "#ffffff",//背景颜色  
    foreground : "#000000" //前景颜色  );

Related recommendations:

How to implement the shopping cart function in javascript (code)

The idea and code of native js to implement the calendar

The above is the detailed content of How to generate QR code in js? How to generate QR code using js (code). For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn