Contoh penggunaan jquery.qrcode untuk menjana kod QR warna

Contoh penggunaan jquery.qrcode untuk menjana kod QR warna_jquery

WBOY

Lepaskan： 2016-05-16 16:40:12

asal

1968 orang telah melayarinya

jquery.qrcode.js ialah pemalam untuk melukis kod QR dalam perpustakaan kelas jquery Ia digunakan untuk merealisasikan pemaparan grafik kod QR dan menyokong dua kaedah lukisan: kanvas dan jadual. (Apabila jquery.qrcode.js menetapkan mod paparan kepada jadual, ia akan berubah bentuk dalam pelayar teras webkit seperti chrome. Ini memerlukan perhatian.)

Berikut ialah kod ujian (kawalan warna ditambah, nilai warna 4 blok boleh ditetapkan, dan render perlu dinyatakan sebagai jadual.), kesannya adalah seperti berikut:

Kod adalah seperti berikut:

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

Salin selepas log masuk

Pustaka jquery-qrcode menggunakan kaedah charCodeAt untuk penukaran pengekodan, dan kaedah ini akan memperoleh pengekodan Unicode secara lalai Secara amnya, penyahkod menggunakan UTF-8, ISO-8859-1, dsb., dan Bahasa Inggeris adalah Tiada masalah. . Jika bahasa Cina, secara amnya Unicode dilaksanakan dalam UTF-16, dengan panjang 2 digit, manakala pengekodan UTF-8 ialah 3 digit, jadi pengekodan dan penyahkodan kod QR tidak akan sepadan.

Penyelesaian: Tukar rentetan kepada UTF-8 sebelum mengekod kod QR Kod khusus adalah seperti berikut: fungsi utf16to8