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/">
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"));
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 :
$('#code').qrcode("http://www.baidu.com"); //任意字符串
méthode table :
$("#code").qrcode({ render: "table", //table方式 width: 200, //宽度 height:200, //高度 text: "www.helloweba.com" //任意内容 });
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; }
Appeler la méthode de conversion lors de la génération :
var str = toUtf8("字符串测试!"); $('#code').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. Introduisezimport QRCode from 'qrcode' //定义生成二维码组件
import QRCode from 'qrcode' //引入生成二维码组件
<template> <p id="query"> <h1>二维码:</h1> <canvas id="canvas"></canvas> </p> </template>
#canvas{ width: 80%!important; height: auto!important; }
//动态生成二维码 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!'); }) }
Lecture recommandée :
JS implémente la commutation aléatoire de l'ID WeChatString.prototype.format Comment utiliser l'épissage de chaînes Comment empaqueter node.js avec webpackComment créer une animation de balle avec jsCe 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!