Le plug-in jquery qrcode génère le code QR online

Le plug-in jquery qrcode génère le code QR online_jquery

WBOY

Libérer： 2016-05-16 16:02:16

original

1373 Les gens l'ont consulté

Avec le développement de l'Internet mobile, les codes QR sont désormais de plus en plus utilisés. En les scannant, vous pouvez parcourir des sites Web, ajouter des amis, etc. C'est vraiment bien plus pratique que de les saisir manuellement.

Nous avons élaboré un système d'évaluation complet dès le début, compte tenu de la mise en œuvre progressive du mobile. Il n'est pas pratique pour les utilisateurs de saisir une longue liste d'adresses IP. À l'aide de codes QR, les utilisateurs peuvent accéder directement au système en choisissant. leurs téléphones portables et leurs numérisations.

Sur la base de ce scénario d'application, je suis allé en ligne pour rechercher comment implémenter les codes QR de sites Web. En résumé, il en existe deux types :

1. Utilisez certains sites Web générateurs de codes QR ou générateurs de codes QR pour générer des images de codes QR, puis accrochez-les sur le site Web, tels que le générateur en ligne Code Cloud QR-Code (code QR)

Avantages : le coût de développement est nul, des codes QR diversifiés peuvent être rapidement réalisés

Inconvénients : Changer le code QR et le maintenir est un peu gênant

2. Utilisez le code Java ou .net sur le backend pour générer des images de code QR, puis référencez les images sur le site Web, telles que qrcode, zxing, etc.

Avantages : Génération de lots rapide et hautement personnalisable

Inconvénients : implémentation lourde, coût de développement plus élevé pour des applications simples

3. Générez instantanément un code QR (ˇ?ˇ) sur la page frontale via JavaScript ou d'autres méthodes, telles que jquery-qrcode

Avantages : implémentation légère, réduction des E/S d'image, économie de trafic

Inconvénients : Ne convient pas pour générer des codes QR complexes

Bien entendu, dans les applications réelles, ces trois méthodes de mise en œuvre ne sont pas complètement isolées. Nous pouvons également combiner les applications en fonction de la situation réelle du projet pour maximiser l'efficacité et réduire les coûts.

Je n'avais pas beaucoup de temps la nuit alors j'ai choisi jquery-qrcode pour étudier.

jquery-qrcode

jquery-qrcode est un plug-in jquery qui peut générer des codes QR côté navigateur. Il est autonome, moins de 4k avec une compression minimale et ne comporte aucune demande de téléchargement d'image. Après avoir présenté cette bibliothèque de classes, vous pouvez facilement ajouter des codes QR aux pages Web avec une seule ligne de code.

Il est hébergé sur github : https://github.com/jeromeetienne/jquery-qrcode

jquery-qrcode contient principalement deux fichiers :

1. qrcode.js : classe d'implémentation de l'algorithme de code QR

2. jquery.qrcode.js : utilisez jquery pour encapsuler qrcode.js et implémentez le rendu du canevas et du tableau pour générer des codes QR en fonction des paramètres utilisateur

Après compression, il n'y a qu'un seul fichier jquery.qrcode.min.js.

Mise en œuvre du code

Il existe en fait des instructions et des exemples très détaillés sur github, je n'entrerai donc pas dans les détails ici.

Cependant, pour faciliter une utilisation future, je réorganiserai le code en fonction de l'expérience de chacun sur Internet.

Le code jquery-qrcode.html est le suivant :

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

Copier après la connexion

Sur la base de l'échantillon de test officiel, nous constaterons que le code QR chinois reconnu sera tronqué.

Selon l'explication d'internautes bien intentionnés :

Ceci est lié au mécanisme js. La bibliothèque jquery-qrcode utilise charCodeAt() pour effectuer la conversion d'encodage,

Cette méthode obtiendra son encodage Unicode par défaut. Généralement, les décodeurs utilisent UTF-8, ISO-8859-1, etc.,

Il n'y a pas de problème en anglais. S'il s'agit de chinois, généralement Unicode est implémenté en UTF-16, avec une longueur de 2 chiffres, tandis que l'encodage UTF-8 est de 3 chiffres, donc l'encodage et le décodage du code QR seront effectués. ne correspond pas.

La solution est bien sûr de convertir la chaîne en UTF-8 avant d'encoder le QR code

Nous pouvons donc résoudre ce problème à l'aide de utf16to8.js. Le code spécifique est le suivant :

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

Copier après la connexion

Ce qui précède représente tout le contenu partagé avec vous aujourd'hui. J'espère qu'il sera utile à tous ceux qui apprennent jQuery.