Maison >interface Web >js tutoriel >Utiliser le code JS pour créer des codes QR et générer des fonctions (tutoriel détaillé)

Utiliser le code JS pour créer des codes QR et générer des fonctions (tutoriel détaillé)

亚连
亚连original
2018-05-31 16:10:424405parcourir

Cet article partage avec vous la fonction simple de génération de code QR à l'aide de 11 lignes de code JS simple. Les amis intéressés peuvent s'y référer.

Code HTML :

<img style="display: none" id="qrcode" data-width="100" data-height="100" data-url="https://www.baidu.com/">

Code JS associé :

/**
  * 生成二维码
  * data-width={宽度}
  * data-height={高度}
  * data-url={链接}
  * @param $ele
  */
 var generatorQRCODE = function ($ele) {
  $ele.hide();
  var params = $ele.data();
  if(!params[&#39;width&#39;] || !params[&#39;height&#39;] || !params[&#39;url&#39;]){
   console.log(&#39;生成二维码参数错误&#39;);
   return false;
  }
  var image = new Image();
  var imageUrl = "http://pan.baidu.com/share/qrcode?w=" + params[&#39;width&#39;] + "&h=" + params[&#39;height&#39;] + "&url=" + params[&#39;url&#39;] + "";
  image.src = imageUrl;
  $ele.attr(&#39;src&#39;, imageUrl);
  $ele.show();
 };
 
 generatorQRCODE($("#qrcode"));

Je le partagerai avec vous Voici d'autres cas de génération de codes QR :

Utilisez jquery.qrcode pour générer des codes QR

1 Ajoutez d'abord le fichier de la bibliothèque jquery et le plug-in qrcode au. page

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

2. Ajoutez le code suivant à la page où le code QR doit être affiché :

<p id="code"></p>

3. Prend en charge deux méthodes de canevas et de tableau pour le rendu d'image

méthode canevas :

$(&#39;#code&#39;).qrcode("http://www.baidu.com"); //任意字符串

méthode table :

$("#code").qrcode({ 
  render: "table", //table方式 
  width: 200, //宽度 
  height:200, //高度 
  text: "www.helloweba.com" //任意内容 
});

4. , vous devez convertir la chaîne en UTF-8

Définir la méthode de conversion :

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

Appeler la méthode de conversion lors de la génération :

var str = toUtf8("字符串测试!"); 
$(&#39;#code&#39;).qrcode(str);

2. Dans Générez dynamiquement du code QR dans le projet Vue-cli

1 Introduisez qrcode--------npm install qrcode

2 Introduisez

<.>3. Introduisez
import QRCode from &#39;qrcode&#39;  //定义生成二维码组件

dans les composants qui doivent générer des codes QR 4. Définissez l'emplacement généré en HTML et faites attention à l'ajout de styles
import QRCode from &#39;qrcode&#39;   //引入生成二维码组件

5. Définissez la méthode de génération de code QR en js et appelez
<template>
 <p id="query">
  <h1>二维码:</h1>
  <canvas id="canvas"></canvas>
 </p>

</template>
#canvas{
  width: 80%!important;
  height: auto!important;
 }

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

//动态生成二维码
  useqrcode(){    //生成的二维码内容,可以添加变量    this.QueryDetail=&#39;http://www.kspxzx.com/#/guard&#39;+"?unique_code="+this.QueryDetail;var canvas = document.getElementById(&#39;canvas&#39;)
    QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
    if (error) console.error(error)
    console.log(&#39;success!&#39;);
    })
  }
Articles associés :

Solution au problème de clignotement du chargement de la page vue

jQuery implémente la fonction de saut entre les navigateurs et de transmission des paramètres [Prise en charge des caractères chinois]

Méthode de requête vue-cli axios et problèmes de traitement inter-domaines

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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