suchen

Heim  >  Artikel  >  Web-Frontend  >  Das jquery-Plug-in qrcode generiert den QR-Code online_jquery

Das jquery-Plug-in qrcode generiert den QR-Code online_jquery

WBOY
WBOYOriginal
2016-05-16 16:02:161380Durchsuche

Mit der Entwicklung des mobilen Internets werden QR-Codes immer häufiger verwendet. Durch das Scannen können Sie Websites durchsuchen, Freunde hinzufügen usw. Das ist wirklich viel bequemer als die manuelle Eingabe.

Wir haben in der Anfangsphase ein umfassendes Bewertungssystem erstellt, da es für Benutzer umständlich ist, eine lange Liste von IP-Adressen einzugeben. Mithilfe von QR-Codes können Benutzer das System direkt eingeben ihre Mobiltelefone hochlegen und scannen.

Basierend auf diesem Anwendungsszenario habe ich online recherchiert, wie man Website-QR-Codes implementiert. Zusammenfassend gibt es zwei Arten:

1. Verwenden Sie einige QR-Code-erzeugende Websites oder QR-Code-Generatoren, um QR-Code-Bilder zu generieren, und hängen Sie sie dann auf der Website auf, z. B. den Online-Generator Code Cloud QR-Code (QR-Code)

Vorteile: Die Entwicklungskosten betragen null, vielfältige QR-Codes können schnell realisiert werden;

Nachteile: Das Ändern und Pflegen des QR-Codes ist etwas mühsam

2. Verwenden Sie Java- oder .net-Code im Backend, um QR-Code-Bilder zu generieren, und verweisen Sie dann auf die Bilder auf der Website, z. B. qrcode, zxing usw.

Vorteile: Hochgradig anpassbare, schnelle Batch-Generierung

Nachteile: schwere Implementierung, höhere Entwicklungskosten für einfache Anwendungen

3. Generieren Sie sofort einen QR-Code (ˇ?ˇ) auf der Front-End-Seite über JavaScript oder andere Methoden, wie z. B. jquery-qrcode

Vorteile: Leichte Implementierung, Reduzierung der Bild-IO, Einsparung von Datenverkehr

Nachteile: Nicht für die Generierung komplexer QR-Codes geeignet

Natürlich sind diese drei Implementierungsmethoden in tatsächlichen Anwendungen nicht vollständig isoliert. Wir können Anwendungen auch entsprechend der tatsächlichen Projektsituation kombinieren, um die Effizienz zu maximieren und Kosten zu sparen.

Nachts hatte ich nicht viel Zeit, also habe ich mich zum Lernen für jquery-qrcode entschieden.

jquery-qrcode

jquery-qrcode ist ein JQuery-Plug-In, das browserseitig QR-Codes generieren kann. Es ist eigenständig, weniger als 4 KB groß, mit minimaler Komprimierung und erfordert keine Bild-Download-Anforderungen. Nach der Einführung dieser Klassenbibliothek können Sie mit nur einer Codezeile ganz einfach QR-Codes zu Webseiten hinzufügen.

Es wird auf Github gehostet:

https://github.com/jeromeetienne/jquery-qrcode

jquery-qrcode enthält hauptsächlich zwei Dateien:

1. qrcode.js: QR-Code-Algorithmus-Implementierungsklasse

2. jquery.qrcode.js: Verwenden Sie jquery, um qrcode.js zu kapseln, und implementieren Sie Canvas- und Tabellen-Rendering, um QR-Codes gemäß Benutzerparametern zu generieren

Nach der Komprimierung gibt es nur noch eine Datei jquery.qrcode.min.js.

Code-Implementierung

Es gibt tatsächlich sehr detaillierte Anleitungen und Beispiele auf Github, daher werde ich hier nicht auf Details eingehen.

Zur Vereinfachung der zukünftigen Verwendung werde ich den Code jedoch basierend auf den Erfahrungen aller im Internet neu organisieren.

jquery-qrcode.html-Code lautet wie folgt: 


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>通过jquery-qrcode生成二维码</title>
</head>
<body>
<!-- 引入百度CDN公共库的压缩版jQuery -->
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<!--引入压缩版jquery.qrcode.js -->
<script src="jquery.qrcode.min.js"></script>
<!--未压缩则需要引入两个文件jquery.qrcode.js和qrcode.js -->
<!--jquery.qrcode.js：jquery封装渲染类库 -->
<!--<script src="jquery.qrcode.js"></script>-->
<!--qrcode.js：二维码核心计算类库 -->
<!--<script src="qrcode.js"></script>-->
<script src="jquery.qrcode.min.js"></script>
<!--解决中文乱码问题，引入utf16t8.js -->
<script src="utf16to8.js"></script>

<div id="qrcodeCanvas"></div>

<div id="qrcodeTable"></div>
<script>
 //最简用法，render默认是canvas
 $('#qrcodeCanvas').qrcode("http://www.jb51.net/");
 //完整用法，有默认值的均可省略
 $('#qrcodeTable').qrcode({
  text: utf16to8("脚本之家：http://www.jb51.net/"),//二维码包含的内容，默认只支持英文内容,中文会乱码，通过utf16to8转码可支持中文
  render: "table",//渲染方式可选择canvas或table，默认是canvas，canvas方式还支持右键图片下载
  width: 256,//宽度，默认是256
  height: 256,//高度，默认是256，建议宽度和高度保持一致，否则不容易被识别
  typeNumber: -1,//计算模式，默认是-1
  //correctLevel: QRErrorCorrectLevel.H,//纠错等级，默认是QRErrorCorrectLevel.H，但是加上correctLevel这一行后无法渲染出二维码
  background: "#ffffff",//背景颜色，默认是白色
  foreground: "#000000"//前景颜色，默认是黑色
 });
</script>
<body>
</html>
Basierend auf dem offiziellen Beispieltest werden wir feststellen, dass der erkannte chinesische QR-Code verstümmelt ist.

Laut der Erklärung von Internetnutzern mit guten Absichten:

Dies hängt mit dem js-Mechanismus zusammen. Die jquery-qrcode-Bibliothek verwendet charCodeAt(), um die Codierungskonvertierung durchzuführen,

Diese Methode erhält standardmäßig ihre Unicode-Kodierung. Im Allgemeinen verwenden Decoder UTF-8, ISO-8859-1 usw.,

Wenn es sich um Chinesisch handelt, wird Unicode im Allgemeinen in UTF-16 mit einer Länge von 2 Ziffern implementiert, während die UTF-8-Kodierung 3 Ziffern umfasst, sodass die Kodierung und Dekodierung des QR-Codes erfolgt nicht übereinstimmen.

Die Lösung besteht natürlich darin, die Zeichenfolge vor der Codierung des QR-Codes in UTF-8 zu konvertieren

Damit wir dieses Problem mit Hilfe von utf16to8.js lösen können, lautet der spezifische Code wie folgt: 


function utf16to8(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;
}
Das Obige ist der gesamte Inhalt, der heute mit Ihnen geteilt wird. Ich hoffe, dass er für alle, die jQuery lernen, hilfreich sein wird.

Stellungnahme：
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
Vorheriger Artikel：jQuery implementiert den Karten-Hotspot-Effekt der Eingabeaufforderung information_jquery mit der MausNächster Artikel：jQuery implementiert den Karten-Hotspot-Effekt der Eingabeaufforderung information_jquery mit der Maus

In Verbindung stehende Artikel

Mehr sehen