recherche

Maison >interface Web >js tutoriel >Exemple d'utilisation de jquery.qrcode pour générer un code QR couleur_jquery

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

WBOY
WBOYoriginal
2016-05-16 16:40:122017parcourir

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>

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

.
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment déclarer directement un objet dans les connaissances js_BasicArticle suivant：Comment déclarer directement un objet dans les connaissances js_Basic

Articles Liés

Voir plus