suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für die Verwendung von jquery.qrcode zum Generieren eines farbigen QR-Codes_jquery

Beispiel für die Verwendung von jquery.qrcode zum Generieren eines farbigen QR-Codes_jquery

WBOY
WBOYOriginal
2016-05-16 16:40:122017Durchsuche

jquery.qrcode.js ist ein Plug-In zum Zeichnen von QR-Codes in der JQuery-Klassenbibliothek. Es wird zum Rendern von QR-Code-Grafiken verwendet und unterstützt zwei Zeichenmethoden: Leinwand und Tabelle. (Wenn jquery.qrcode.js den Anzeigemodus auf Tabelle setzt, wird er in Webkit-Kernbrowsern wie Chrome deformiert. Dies erfordert Aufmerksamkeit.)

Das Folgende ist der Testcode (Farbsteuerung wird hinzugefügt, die Farbwerte von 4 Blöcken können eingestellt werden und das Rendern muss als Tabelle angegeben werden.), der Effekt ist wie folgt:

Der Code lautet wie folgt: 

<html>
<head>
<title>JS生成二维码</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<style>
 #output{
  margin-left:300px; 
  margin-top:100px; 
 }
</style>
</head>
<body>
<div id="output"></div>
<script>
 window.onload = function () {
  var trs = $('#output').qrcode({
   width: 100,
   height: 100,
   render: "canvas", //设置渲染方式 table canvas
   text: utf16to8("javascript生成二维码"),
   background: "#ffffff", //背景颜色 
   foreground: "red" //前景颜色 
  }).find('tr'), trLen = Math.floor(trs.size() / 2), tdLen = Math.floor(trs.eq(0).find('td').size() / 2), tds, bgColor;
  var colors = [['#ff0000', '#0100e2'], ['#00ed01', '#9f4d95']];
  trs.each(function (j) {
   tds = $(this).find('td');
   tds.each(function (i) {
    bgColor = this.style.backgroundColor;
    if (bgColor == 'red') {
     this.style.backgroundColor = colors[j < trLen &#63; 0 : 1][i < tdLen &#63; 0 : 1];
    }
   });
  });
 }
 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;
 } 
</script>
 
</body>
</html>

Die jquery-qrcode-Bibliothek verwendet die charCodeAt-Methode zur Kodierungskonvertierung, und diese Methode erhält standardmäßig ihre Unicode-Kodierung. Im Allgemeinen verwenden Decoder UTF-8, ISO-8859-1 usw., und Englisch ist kein Problem 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 nicht übereinstimmen.

Lösung: Konvertieren Sie die Zeichenfolge in UTF-8, bevor Sie den QR-Code codieren. Der spezifische Code lautet wie folgt: utf16to8-Funktion

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：So deklarieren Sie ein Objekt direkt in js_GrundkenntnisseNächster Artikel：So deklarieren Sie ein Objekt direkt in js_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen