Maison > interface Web > js tutoriel > le corps du texte

JS génère un code QR

php中世界最好的语言
Libérer: 2018-03-17 09:46:07
original
2604 Les gens l'ont consulté

Cette fois, je vais vous apporter JS pour générer du QR code. Quelles sont les précautions pour que JS génère du QR code Voici un cas pratique, jetons un coup d'œil.

Code HTML :

<img style="display: none" id="qrcode" data-width="100" data-height="100" data-url="https://www.baidu.com/">
Copier après la connexion

Code JS associé :

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

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>
Copier après la connexion

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

<p id="code"></p>
Copier après la connexion

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

méthode canevas :

$('#code').qrcode("http://www.baidu.com"); //任意字符串
Copier après la connexion

méthode table :

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

4. Si le contenu du code QR généré contient du texte. , 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;  
}
Copier après la connexion

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

var str = toUtf8("字符串测试!"); 
$('#code').qrcode(str);
Copier après la connexion

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 'qrcode'  //定义生成二维码组件
Copier après la connexion

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 'qrcode'   //引入生成二维码组件
Copier après la connexion

<template>
 <p id="query">
  <h1>二维码:</h1>
  <canvas id="canvas"></canvas>
 </p>
</template>
Copier après la connexion
. 5. Définissez la méthode de génération de code QR en js et appelez
#canvas{
  width: 80%!important;
  height: auto!important;
 }
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !
//动态生成二维码
  useqrcode(){    //生成的二维码内容,可以添加变量    this.QueryDetail='http://www.kspxzx.com/#/guard'+"?unique_code="+this.QueryDetail;var canvas = document.getElementById('canvas')
    QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
    if (error) console.error(error)
    console.log('success!');
    })
  }
Copier après la connexion

Lecture recommandée :

JS implémente la commutation aléatoire de l'ID WeChat


String.prototype.format Comment utiliser l'épissage de chaînes


Comment empaqueter node.js avec webpack


Comment créer une animation de balle avec js

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal