Rumah >hujung hadapan web >tutorial js >jquery plug-in qrcode menjana kod QR online_jquery

jquery plug-in qrcode menjana kod QR online_jquery

WBOYasal: 2016-05-16 16:02:161419semak imbas

Dengan pembangunan Internet mudah alih, kod QR kini semakin digunakan secara meluas Dengan mengimbasnya, anda boleh menyemak imbas tapak web, menambah rakan, dsb. Ia benar-benar lebih mudah daripada memasukkannya secara manual.

Kami membuat sistem penilaian yang komprehensif pada peringkat awal, memandangkan pelaksanaan mudah alih secara beransur-ansur Menyusahkan pengguna untuk memasukkan senarai panjang alamat IP Dengan bantuan kod QR, pengguna boleh terus memasuki sistem dengan memilih mengangkat telefon bimbit mereka dan mengimbas.

Berdasarkan senario aplikasi ini, saya pergi ke dalam talian untuk menyelidik cara melaksanakan kod QR tapak web Secara ringkasnya, terdapat dua jenis:

1. Gunakan beberapa tapak web penjana kod QR atau penjana kod QR untuk menjana imej kod QR, dan kemudian gantungkannya di tapak web, seperti penjana dalam talian Kod Awan Kod QR (kod QR)

Kelebihan: Kos pembangunan adalah sifar, kod QR terpelbagai boleh direalisasikan dengan cepat

Kelemahan: Menukar kod QR dan mengekalkannya agak menyusahkan

2. Gunakan kod java atau .net pada bahagian belakang untuk menjana imej kod QR, dan kemudian rujuk imej di tapak web, seperti qrcode, zxing, dll.

Kelebihan: Penjanaan kelompok yang sangat boleh disesuaikan dan pantas

Kelemahan: pelaksanaan wajaran berat, kos pembangunan yang lebih tinggi untuk aplikasi mudah

3. Hasilkan kod QR (ˇ?ˇ) dengan serta-merta pada halaman hujung hadapan melalui JavaScript atau kaedah lain, seperti jquery-qrcode

Kelebihan: pelaksanaan ringan, mengurangkan IO imej, menjimatkan trafik

Kelemahan: Tidak sesuai untuk menjana kod QR kompleks

Sudah tentu, dalam aplikasi sebenar, ketiga-tiga kaedah pelaksanaan ini tidak diasingkan sepenuhnya. Kami juga boleh menggabungkan aplikasi mengikut situasi sebenar projek untuk memaksimumkan kecekapan dan menjimatkan kos.

Saya tidak mempunyai banyak masa pada waktu malam jadi saya memilih jquery-qrcode untuk belajar.

jquery-qrcode

jquery-qrcode ialah pemalam jquery yang boleh menjana kod QR pada bahagian pelayar. Ia serba lengkap, kurang daripada 4k dengan pemampatan minimum dan tidak mempunyai permintaan muat turun imej. Selepas memperkenalkan perpustakaan kelas ini, anda boleh dengan mudah menambahkan kod QR pada halaman web dengan hanya satu baris kod.

Ia dihoskan pada github: https://github.com/jeromeetienne/jquery-qrcode

jquery-qrcode terutamanya mengandungi dua fail:

1. qrcode.js: Kelas pelaksanaan algoritma kod QR

2. jquery.qrcode.js: Gunakan jquery untuk merangkum qrcode.js, dan laksanakan kanvas dan pemaparan jadual untuk menjana kod QR mengikut parameter pengguna

Selepas pemampatan, terdapat hanya satu fail jquery.qrcode.min.js.

Pelaksanaan kod

Sebenarnya terdapat arahan dan contoh yang sangat terperinci tentang github, jadi saya tidak akan menerangkan butiran di sini.

Namun, untuk kemudahan penggunaan pada masa hadapan, saya akan menyusun semula kod berdasarkan pengalaman semua orang di Internet.

Kod jquery-qrcode.html adalah seperti berikut:

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

Berdasarkan ujian sampel rasmi, kami akan mendapati bahawa kod QR Cina yang diiktiraf akan bercelaru.

Menurut penjelasan netizen dengan niat baik:

Ini berkaitan dengan mekanisme js Pustaka jquery-qrcode menggunakan charCodeAt() untuk melakukan penukaran pengekodan,

Kaedah ini akan memperoleh pengekodan Unikod secara lalai Secara amnya, penyahkod menggunakan UTF-8, ISO-8859-1, dsb.,

Tiada masalah dalam bahasa Inggeris Jika bahasa Cina, umumnya Unicode dilaksanakan dalam UTF-16, dengan panjang 2 digit, manakala pengekodan UTF-8 ialah 3 digit, jadi pengekodan dan penyahkodan kod QR akan. tidak sepadan.

Penyelesaian sudah tentu ialah menukar rentetan kepada UTF-8 sebelum mengekod kod QR

Jadi kami boleh menyelesaikan masalah ini dengan bantuan utf16to8.js Kod khusus adalah seperti berikut:

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

Di atas adalah semua kandungan yang dikongsi dengan anda hari ini. Saya harap ia akan membantu semua orang yang mempelajari jQuery.

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：jQuery melaksanakan kesan tempat liputan peta tetikus yang menghantar maklumat segera_jqueryArtikel seterusnya：jQuery melaksanakan kesan tempat liputan peta tetikus yang menghantar maklumat segera_jquery

Artikel berkaitan

Lihat lagi