Heim > Web-Frontend > js-Tutorial > JS-Code-Generierung QR-Code-Beispielfreigabe

JS-Code-Generierung QR-Code-Beispielfreigabe

小云云
Freigeben: 2018-03-12 09:19:12
Original
2508 Leute haben es durchsucht

Es gibt viele Methoden zum Generieren von QR-Codes. Ich hoffe, dass er Ihnen helfen kann.

HTML-Code:

<img style="display: none" id="qrcode" data-width="100" data-height="100" data-url="https://www.baidu.com/">
Nach dem Login kopieren

Zugehöriger JS-Code:

/**
  * 生成二维码
  * data-width={宽度}
  * data-height={高度}
  * data-url={链接}
  * @param $ele
  */
 var generatorQRCODE = function ($ele) {
  $ele.hide();
  var params = $ele.data();
  if(!params[&#39;width&#39;] || !params[&#39;height&#39;] || !params[&#39;url&#39;]){
   console.log(&#39;生成二维码参数错误&#39;);
   return false;
  }
  var image = new Image();
  var imageUrl = "http://pan.baidu.com/share/qrcode?w=" + params[&#39;width&#39;] + "&h=" + params[&#39;height&#39;] + "&url=" + params[&#39;url&#39;] + "";
  image.src = imageUrl;
  $ele.attr(&#39;src&#39;, imageUrl);
  $ele.show();
 };
 
 generatorQRCODE($("#qrcode"));
Nach dem Login kopieren

Ich werde es teilen Wieder bei Ihnen Hier sind weitere Fälle zum Generieren von QR-Codes:

Verwenden Sie jquery.qrcode, um QR-Codes zu generieren

Fügen Sie zunächst die jquery-Bibliotheksdatei und das qrcode-Plug-in hinzu Seite

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
Nach dem Login kopieren

2. Fügen Sie den folgenden Code zu der Seite hinzu, auf der der QR-Code angezeigt werden soll:

<p id="code"></p>
Nach dem Login kopieren

3. Rufen Sie das QR-Code-Plugin auf. Unterstützt zwei Methoden von Canvas und Tabelle für die Bildwiedergabe

Canvas-Methode:

$(&#39;#code&#39;).qrcode("http://www.baidu.com"); //任意字符串
Nach dem Login kopieren

Tabellenmethode:

$("#code").qrcode({ 
  render: "table", //table方式 
  width: 200, //宽度 
  height:200, //高度 
  text: "www.helloweba.com" //任意内容 
});
Nach dem Login kopieren

4. Wenn der generierte QR-Code-Inhalt Text enthält , Sie müssen die Zeichenfolge in UTF-8 konvertieren

Definieren Sie die Konvertierungsmethode:

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;  
}
Nach dem Login kopieren

Rufen Sie die Konvertierungsmethode beim Generieren auf:

var str = toUtf8("字符串测试!"); 
$(&#39;#code&#39;).qrcode(str);
Nach dem Login kopieren

2. In Generieren Sie dynamisch QR-Code im Vue-cli-Projekt

1. Führen Sie qrcode--------npm install qrcode

2 ein 🎜>3. Fügen Sie

import QRCode from &#39;qrcode&#39;  //定义生成二维码组件
Nach dem Login kopieren

in die Komponenten ein, die zum Generieren von QR-Codes benötigt werden. 4. Definieren Sie den generierten Speicherort in HTML und achten Sie auf das Hinzufügen von Stilen

import QRCode from &#39;qrcode&#39;   //引入生成二维码组件
Nach dem Login kopieren

5. Definieren Sie die Methode zum Generieren von QR-Code in js und rufen Sie
<template>
 <p id="query">
  <h1>二维码:</h1>
  <canvas id="canvas"></canvas>
 </p>

</template>
Nach dem Login kopieren
#canvas{
  width: 80%!important;
  height: auto!important;
 }
Nach dem Login kopieren

Verwandte Empfehlungen auf:

//动态生成二维码
  useqrcode(){    //生成的二维码内容,可以添加变量    this.QueryDetail=&#39;http://www.kspxzx.com/#/guard&#39;+"?unique_code="+this.QueryDetail;var canvas = document.getElementById(&#39;canvas&#39;)
    QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
    if (error) console.error(error)
    console.log(&#39;success!&#39;);
    })
  }
Nach dem Login kopieren

phpqrcode-Klassenbibliothek zum Generieren von QR-Code-Beispielcode

php generiert Bilder mit QR-Codes und erzwingt den Download des Implementierungscodes

Wie PHP die QR-Code-Erkennung implementiert – Beispielfreigabe

Das obige ist der detaillierte Inhalt vonJS-Code-Generierung QR-Code-Beispielfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage