Rumah > hujung hadapan web > tutorial js > Gunakan jquery plug-in qrcode untuk menjana QR code_jquery

Gunakan jquery plug-in qrcode untuk menjana QR code_jquery

WBOY
Lepaskan: 2016-05-16 15:35:40
asal
1581 orang telah melayarinya

Aplikasi kod QR telah menembusi kehidupan dan kerja kami Anda hanya perlu "mengimbas" kod QR dengan telefon mudah alih anda untuk mendapatkan maklumat yang sepadan, yang memudahkan kami memahami peniaga, membeli-belah, menonton filem, dll. . Artikel ini akan memperkenalkan kod QR pemalam penjanaan kod QR berasaskan jquery. Memanggil pemalam ini pada halaman boleh menjana kod QR yang sepadan.
qrcode sebenarnya menggunakan jQuery untuk mencapai pemaparan dan lukisan grafik, dan menyokong kanvas (HTML5) dan jadual Anda boleh mendapatkan kod terkini di sini.

Cara menggunakan
1. Mula-mula tambah fail perpustakaan jquery dan pemalam kod qr ke halaman.

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.qrcode.min.js"></script> 
Salin selepas log masuk

2. Tambahkan kod berikut pada halaman tempat kod QR perlu dipaparkan:

<div id="code"></div> 
Salin selepas log masuk

3. Panggil pemalam kod qr.
qrcode menyokong dua kaedah kanvas dan jadual untuk pemaparan imej Kaedah kanvas digunakan secara lalai, yang merupakan yang paling berkesan, penyemak imbas mesti menyokong HTML5. Panggilan terus seperti berikut:

$('#code').qrcode("http://www.jb51.net"); //任意字符串 
Salin selepas log masuk

Anda juga boleh menghubungi melalui:

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

Dengan cara ini, kod QR boleh dijana terus pada halaman Anda boleh menggunakan fungsi "imbasan" telefon mudah alih anda untuk membaca maklumat kod QR.
Kenali bahasa Cina
Semasa percubaan, kami mendapati bahawa kod QR dengan kandungan Cina tidak dapat dikenali Dengan mencari pelbagai maklumat, kami mengetahui bahawa jquery-qrcode menggunakan kaedah charCodeAt() untuk penukaran pengekodan. Kaedah ini akan memperoleh pengekodan Unicodenya secara lalai Jika terdapat kandungan Cina, rentetan mesti ditukar kepada UTF-8 sebelum menjana kod QR, dan kemudian kod QR akan dijana. Anda boleh menukar rentetan bahasa Cina melalui fungsi berikut:

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;  
} 
Salin selepas log masuk

Contoh di bawah:

var str = toUtf8("脚本之家!"); 
$('#code').qrcode(str); 
Salin selepas log masuk

Terdapat banyak tutorial tentang cara membuat kod QR dalam talian sekarang. Anda harus belajar menggunakannya secara fleksibel dan memilih kaedah kegemaran anda untuk menguasai kemahiran membuat kod QR.

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan