Maison >interface Web >js tutoriel >Comment implémenter le code QR en javascript

Comment implémenter le code QR en javascript

藏色散人
藏色散人original
2021-07-03 09:23:3710151parcourir

Comment implémenter le code QR en javascript : 1. Téléchargez le plug-in qrcodejs ; 2. Utilisez qrcode pour générer le code QR, le code ressemble à "new QRCode(document.getElementById("qrcode")".

Comment implémenter le code QR en javascript

Le fonctionnement de cet article Environnement : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3

Comment implémenter le code QR avec javascript

js pour générer du code QR

Nous pouvons utiliser qrcodejs pour. générer du code QR avec js, qrcodejs est Le générateur de QRCode multi-navigateurs pour JavaScript peut facilement générer des codes QR

1 : Téléchargez le plug-in qrcodejs

L'adresse du qrcode : https://github.com/davidshimj...

téléchargé Les fichiers de qrcode sont les suivants, parmi lesquels qrcode.js et qrcide.min.js sont les js dont nous avons besoin. qrcode.min.js est la version compressée de qrcode.js
Comment implémenter le code QR en javascript

Deux : Implémenter le code QR. génération

1 : doit être introduit Le js

qrcodejs est conçu pour être implémenté sur les prémisses de jquery, nous devons donc d'abord introduire jquery puis introduire qrcodejs

<script></script>     <!--引入jquery-->
<script></script>         <!--引入qrcodejs-->

2 : Utilisez qrcode pour réaliser la génération de code QR

<p></p>
<script>
    new QRCode(document.getElementById("qrcode"), "https://wj0511.com");
</script>

À ce moment-là, lorsque nous visitons la page actuelle, nous pouvons voir que nous Le code QR généré est généré. Après avoir scanné le code QR, visitez https://www.wj0511.com

Ici, nous expliquons principalement certains paramètres de base de. le nouveau QRCode suivant

Le code QR que nous avons généré ci-dessus peut accéder à Pour l'URL spécifiée, nous pouvons également définir certains paramètres de base du code QR, comme suit

var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "https://www.wj0511.com",//扫描二维码后的内容
width: 128,//二维码的宽
height: 128,//二维码的高
colorDark : "#000000",//二维码线条颜色
colorLight : "#ffffff",//二维码背景颜色
correctLevel : QRCode.CorrectLevel.H    //二维码等级
});

Apprentissage recommandé : "Tutoriel avancé javascript"

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