Résumé de la génération d'images de code QR avec les compétences JavaScript_javascript

Résumé :

Voici comment Baidu Encyclopedia présente les codes QR : Le code QR (Quick Response Code), également appelé code-barres 2D, est un code noir et blanc qui utilise des figures géométriques spécifiques réparties sur un plan (direction bidimensionnelle) selon certaines règles. Les graphiques alternatifs sont une clé pour toutes les données d’information. Dans les activités commerciales modernes, un large éventail d'applications peuvent être réalisées, telles que : anti-contrefaçon/traçage de produits, diffusion de publicité, liens vers des sites Web, téléchargements de données, transactions de matières premières, positionnement/navigation, applications de commerce électronique, gestion de véhicules, transmission d'informations. , etc. De nos jours, l'application de la fonction de numérisation (appelée 313) sur les smartphones a rendu les codes QR plus courants. Avec le développement vigoureux de l'industrie nationale de l'Internet des objets, davantage de solutions d'application de la technologie des codes QR ont été développées et les codes QR sont devenus. l'entrée de l'Internet mobile devient vraiment une réalité.

On peut voir des QR codes partout quand on navigue sur Internet, alors comment générer des QR codes sur le front end ? Aujourd'hui, je vais partager la génération frontale de codes QR.

Introduction :

QRCode.js est une bibliothèque js qui prend en charge le balisage de canevas et de tableaux HTML5 dans le DOM sur tous les navigateurs. Ce que nous utilisons est basé sur QRCode.js.

Navigateur :

IE6 ~ 10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.

jquery-qrcode :

Fonctionnalités de jquery-qrcode : opération simple, petite taille, seulement 14 Ko après compression, mais ne prend pas en charge l'encodage chinois.

<script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.qrcode.min.js"></script>
<div id="qrcode"></div>
<script>
$(function(){
$('#qrcode').qrcode("http://www.cnblogs.com/xiyangbaixue");
// 更详细的配置
// $('#qrcode').qrcode({
// text: "http://www.cnblogs.com/xiyangbaixue", // 要编码的字符串
// width: 50, // 定义宽度
// height: 50, // 定义高度
// background: "#ccc", // 背景色
// foreground: "red" // 前景色
// });
})
</script>

Effet :

qrcodejs :

Caractéristiques de qrcodejs : le code QR généré en chinois n'apparaîtra pas tronqué une fois numérisé, et vous pouvez choisir quel élément utiliser pour dessiner le code QR.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<div id="qrcode"></div>
<script>
new QRCode(document.getElementById("qrcode"), "http://www.cnblogs.com/xiyangbaixue");
// 或者
// new QRCode(document.getElementById("qrcode"), {
// text: "http://www.cnblogs.com/xiyangbaixue",
// width: 50,
// height: 50,
// background: "#ccc",
// foreground: "red"
// });
</script>

Utiliser SVG :

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="qrcode"/>
</svg>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,
height : 100,
useSVG: true
});
qrcode.makeCode("http://www.cnblogs.com/xiyangbaixue");
// qrcode.clear(); // 清除二维码
</script>

Effet :

Paramètres de configuration :

chaîne de rendu

Configurez quel élément de nœud est utilisé pour dessiner le code QR. Les options sont table, svg et canvas

L'ordre de sélection par défaut est toile -> svg -> table

chaîne de texte

Chaîne à encoder

Par défaut : ""

numéro de largeur

La longueur du code QR, l'unité est le px

Il convient de noter que lors de l'utilisation d'un tableau ou d'un svg pour dessiner le code QR, celui-ci sera réduit de manière appropriée afin que la dimension de la matrice du code QR puisse être divisée.

Par défaut : 256

numéro de hauteur

La largeur du code QR, l'unité est le px

Il convient de noter que lors de l'utilisation d'un tableau ou d'un svg pour dessiner le code QR, celui-ci sera réduit de manière appropriée afin que la dimension de la matrice du code QR puisse être divisée.

Par défaut : 256

numéro de niveau correct

Le niveau de correction d'erreur peut être 0, 1, 2 ou 3. Plus le nombre est grand, plus le niveau de correction d'erreur requis est élevé

Par défaut : 3

couleur de fond

Couleur de fond

Par défaut : #FFFFFF

couleur de premier plan

Couleur de premier plan

Par défaut : #000000