Generate QR code for 11 lines of JS Code and 11 lines of js Code

Generate QR code for 11 lines of JS Code and 11 lines of js Code

HTML code:

Related JS Code:

/*** Generate a QR code * data-width = {width} * data-height = {height} * data-url = {link} * @ param $ ele */var generatorQRCODE = function ($ ele) {$ ele. hide (); var params = $ ele. data (); if (! Params ['width'] |! Params ['height'] |! Params ['url']) {console. log ('generate QR code parameter error'); return false;} var image = new Image (); var imageUrl = "http://pan.baidu.com/share/qrcode? W = "+ params ['width'] +" & h = "+ params ['height'] +" & url = "+ params ['url'] + ""; image. src = imageUrl; $ ele. attr ('src', imageUrl); $ ele. show () ;}; generatorQRCODE ($ ("# qrcode "));

I would like to share with you other cases of generating QR codes:

Use jquery. qrcode to generate a QR code

1. First, add the jquery library file and qrcode plug-in to the page.

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script> 

2. Add the following code to the page where you need to display the QR code:

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

3. Call the qrcode plug-in. Supports canvas and table rendering.

Canvas mode:

$ ('# Code'). qrcode ("http://www.baidu.com"); // any string

Table mode:

$ ("# Code "). qrcode ({render: "table", // table mode width: 200, // width height: 200, // height text: "www.helloweba.com" // any content });

4, if the generated QR code content contains text, you need to convert the string into a UTF-8

Define the conversion method:

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

Call the conversion method during generation:

Var str = toUtf8 ("string test! "); $ ('# Code'). qrcode (str );

2. dynamically generate a QR code in the Vue-cli Project

1. Introduce qrcode -------- npm install qrcode

2. Introduce

Import QRCode from 'qrcode' // defines the QR code generation component.

3. Introduce

Import QRCode from 'qrcode' // introduce the QR code generation component

4. Define the generated position in HTML. Add a style.

<Template> <div id = "query"> 
#canvas{  width: 80%!important;  height: auto!important; }
5. Define the method for generating the QR code in js and call
// Dynamically generate the QR code useqrcode () {// you can add the variable this. QueryDetail = 'HTTP: // www.kspxzx.com/#/guard' + "? Unique_code = "+ this. queryDetail; var canvas = document. getElementById ('canvas ') QRCode. toCanvas (canvas, this. queryDetail, function (error) {if (error) console. error (error) console. log ('success! ');})}