Exemple d'utilisation de jquery.qrcode pour générer un code QR couleur

Exemple d'utilisation de jquery.qrcode pour générer un code QR couleur_jquery

WBOY

Libérer： 2016-05-16 16:40:12

original

1966 Les gens l'ont consulté

jquery.qrcode.js est un plug-in pour dessiner des codes QR dans la bibliothèque de classes jquery. Il est utilisé pour réaliser le rendu graphique de codes QR et prend en charge deux méthodes de dessin : canevas et tableau. (Lorsque jquery.qrcode.js définit le mode d'affichage sur tableau, il sera déformé dans les principaux navigateurs Webkit tels que Chrome. Cela nécessite une attention particulière.)

Ce qui suit est le code de test (le contrôle des couleurs est ajouté, les valeurs de couleur de 4 blocs peuvent être définies et le rendu doit être spécifié sous forme de tableau.), l'effet est le suivant :

Le code est le suivant :

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

Copier après la connexion

La bibliothèque jquery-qrcode utilise la méthode charCodeAt pour la conversion d'encodage, et cette méthode obtiendra son encodage Unicode par défaut. Généralement, les décodeurs utilisent UTF-8, ISO-8859-1, etc., et l'anglais ne pose aucun problème. S'il s'agit de chinois, Unicode est généralement 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 ne correspondront pas.

Solution : Convertissez la chaîne en UTF-8 avant d'encoder le code QR. Le code spécifique est le suivant : fonction utf16to8