Heim > Web-Frontend > js-Tutorial > Verwenden Sie das Jquery-Plug-in qrcode, um QR code_jquery zu generieren

Verwenden Sie das Jquery-Plug-in qrcode, um QR code_jquery zu generieren

WBOY
Freigeben: 2016-05-16 15:35:40
Original
1567 Leute haben es durchsucht

QR-Code-Anwendungen sind in unser Leben und unsere Arbeit eingedrungen. Sie müssen nur den QR-Code mit Ihrem Mobiltelefon „scannen“, um die entsprechenden Informationen zu erhalten, was für uns praktisch ist, um Händler zu verstehen, einzukaufen, Filme anzusehen usw. . In diesem Artikel wird ein auf JQuery basierendes QR-Code-Generierungs-Plugin qrcode vorgestellt. Durch Aufrufen dieses Plug-Ins auf der Seite kann der entsprechende QR-Code generiert werden.
qrcode verwendet tatsächlich jQuery zum Rendern und Zeichnen von Grafiken und unterstützt Canvas (HTML5) und Tabelle. Den neuesten Code erhalten Sie hier.

Anwendung
1. Fügen Sie zunächst die Jquery-Bibliotheksdatei und das QRcode-Plug-In zur Seite hinzu.

<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:

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

3. Rufen Sie das QRcode-Plugin auf.
qrcode unterstützt zwei Methoden: Canvas und Tabelle für die Bildwiedergabe. Die Canvas-Methode ist die effizienteste. Natürlich muss der Browser HTML5 unterstützen. Direkter Aufruf wie folgt:

$('#code').qrcode("http://www.jb51.net"); //任意字符串 
Nach dem Login kopieren

Sie können auch anrufen über:

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

Auf diese Weise kann direkt auf der Seite ein QR-Code generiert werden. Sie können die „Scan“-Funktion Ihres Mobiltelefons verwenden, um die QR-Code-Informationen auszulesen.
Chinesisch erkennen
Während des Experiments stellten wir fest, dass der QR-Code mit chinesischen Inhalten nicht erkannt werden konnte. Durch die Suche nach verschiedenen Informationen haben wir erfahren, dass jquery-qrcode die Methode charCodeAt() zur Codierungskonvertierung verwendet. Diese Methode erhält standardmäßig ihre Unicode-Kodierung. Wenn chinesische Inhalte vorhanden sind, muss die Zeichenfolge vor der Generierung des QR-Codes in UTF-8 konvertiert werden. Anschließend wird der QR-Code generiert. Sie können chinesische Zeichenfolgen mit den folgenden Funktionen konvertieren:

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

Beispiel unten:

var str = toUtf8("脚本之家!"); 
$('#code').qrcode(str); 
Nach dem Login kopieren

Es gibt jetzt viele Tutorials zum Erstellen von QR-Codes online. Sie sollten lernen, sie flexibel zu verwenden und Ihre bevorzugte Methode zu wählen, um die Fähigkeiten zum Erstellen von QR-Codes zu beherrschen.

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