cari

Rumah >hujung hadapan web >tutorial js >Contoh penggunaan jquery.qrcode untuk menjana kod QR warna_jquery

Contoh penggunaan jquery.qrcode untuk menjana kod QR warna_jquery

WBOY
WBOYasal
2016-05-16 16:40:122017semak imbas

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>

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk mengisytiharkan objek secara langsung dalam pengetahuan js_BasicArtikel seterusnya：Bagaimana untuk mengisytiharkan objek secara langsung dalam pengetahuan js_Basic

Artikel berkaitan

Lihat lagi