Le plug-in jquery qrcode génère le code QR online_jquery
Avec le développement de l'Internet mobile, les codes QR sont désormais de plus en plus utilisés. En les scannant, vous pouvez parcourir des sites Web, ajouter des amis, etc. C'est vraiment bien plus pratique que de les saisir manuellement.
Nous avons élaboré un système d'évaluation complet dès le début, compte tenu de la mise en œuvre progressive du mobile. Il n'est pas pratique pour les utilisateurs de saisir une longue liste d'adresses IP. À l'aide de codes QR, les utilisateurs peuvent accéder directement au système en choisissant. leurs téléphones portables et leurs numérisations.
Sur la base de ce scénario d'application, je suis allé en ligne pour rechercher comment implémenter les codes QR de sites Web. En résumé, il en existe deux types :
1. Utilisez certains sites Web générateurs de codes QR ou générateurs de codes QR pour générer des images de codes QR, puis accrochez-les sur le site Web, tels que le générateur en ligne Code Cloud QR-Code (code QR)
Avantages : le coût de développement est nul, des codes QR diversifiés peuvent être rapidement réalisés
Inconvénients : Changer le code QR et le maintenir est un peu gênant
2. Utilisez le code Java ou .net sur le backend pour générer des images de code QR, puis référencez les images sur le site Web, telles que qrcode, zxing, etc.
Avantages : Génération de lots rapide et hautement personnalisable
Inconvénients : implémentation lourde, coût de développement plus élevé pour des applications simples
3. Générez instantanément un code QR (ˇ?ˇ) sur la page frontale via JavaScript ou d'autres méthodes, telles que jquery-qrcode
Avantages : implémentation légère, réduction des E/S d'image, économie de trafic
Inconvénients : Ne convient pas pour générer des codes QR complexes
Bien entendu, dans les applications réelles, ces trois méthodes de mise en œuvre ne sont pas complètement isolées. Nous pouvons également combiner les applications en fonction de la situation réelle du projet pour maximiser l'efficacité et réduire les coûts.
Je n'avais pas beaucoup de temps la nuit alors j'ai choisi jquery-qrcode pour étudier.
jquery-qrcode
jquery-qrcode est un plug-in jquery qui peut générer des codes QR côté navigateur. Il est autonome, moins de 4k avec une compression minimale et ne comporte aucune demande de téléchargement d'image. Après avoir présenté cette bibliothèque de classes, vous pouvez facilement ajouter des codes QR aux pages Web avec une seule ligne de code.
Il est hébergé sur github : https://github.com/jeromeetienne/jquery-qrcode
jquery-qrcode contient principalement deux fichiers :
1. qrcode.js : classe d'implémentation de l'algorithme de code QR
2. jquery.qrcode.js : utilisez jquery pour encapsuler qrcode.js et implémentez le rendu du canevas et du tableau pour générer des codes QR en fonction des paramètres utilisateur
Après compression, il n'y a qu'un seul fichier jquery.qrcode.min.js.
Mise en œuvre du code
Il existe en fait des instructions et des exemples très détaillés sur github, je n'entrerai donc pas dans les détails ici.
Cependant, pour faciliter une utilisation future, je réorganiserai le code en fonction de l'expérience de chacun sur Internet.
Le code jquery-qrcode.html est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过jquery-qrcode生成二维码</title>
</head>
<body>
<!-- 引入百度CDN公共库的压缩版jQuery -->
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<!--引入压缩版jquery.qrcode.js -->
<script src="jquery.qrcode.min.js"></script>
<!--未压缩则需要引入两个文件jquery.qrcode.js和qrcode.js -->
<!--jquery.qrcode.js：jquery封装渲染类库 -->
<!--<script src="jquery.qrcode.js"></script>-->
<!--qrcode.js：二维码核心计算类库 -->
<!--<script src="qrcode.js"></script>-->
<script src="jquery.qrcode.min.js"></script>
<!--解决中文乱码问题，引入utf16t8.js -->
<script src="utf16to8.js"></script>
<div id="qrcodeCanvas"></div>
<div id="qrcodeTable"></div>
<script>
//最简用法，render默认是canvas
$('#qrcodeCanvas').qrcode("http://www.jb51.net/");
//完整用法，有默认值的均可省略
$('#qrcodeTable').qrcode({
text: utf16to8("脚本之家：http://www.jb51.net/"),//二维码包含的内容，默认只支持英文内容,中文会乱码，通过utf16to8转码可支持中文
render: "table",//渲染方式可选择canvas或table，默认是canvas，canvas方式还支持右键图片下载
width: 256,//宽度，默认是256
height: 256,//高度，默认是256，建议宽度和高度保持一致，否则不容易被识别
typeNumber: -1,//计算模式，默认是-1
//correctLevel: QRErrorCorrectLevel.H,//纠错等级，默认是QRErrorCorrectLevel.H，但是加上correctLevel这一行后无法渲染出二维码
background: "#ffffff",//背景颜色，默认是白色
foreground: "#000000"//前景颜色，默认是黑色
});
</script>
<body>
</html>
Sur la base de l'échantillon de test officiel, nous constaterons que le code QR chinois reconnu sera tronqué.
Selon l'explication d'internautes bien intentionnés :
Ceci est lié au mécanisme js. La bibliothèque jquery-qrcode utilise charCodeAt() pour effectuer la conversion d'encodage,
Cette méthode obtiendra son encodage Unicode par défaut. Généralement, les décodeurs utilisent UTF-8, ISO-8859-1, etc.,
Il n'y a pas de problème en anglais. S'il s'agit de chinois, généralement Unicode est implémenté en UTF-16, avec une longueur de 2 chiffres, tandis que l'encodage UTF-8 est de 3 chiffres, donc l'encodage et le décodage du code QR seront effectués. ne correspond pas.
La solution est bien sûr de convertir la chaîne en UTF-8 avant d'encoder le QR code
Nous pouvons donc résoudre ce problème à l'aide de utf16to8.js. Le code spécifique est le suivant :
function utf16to8(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;
}Ce qui précède représente tout le contenu partagé avec vous aujourd'hui. J'espère qu'il sera utile à tous ceux qui apprennent jQuery.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide
Feb 27, 2024 pm 06:45 PM
Explication détaillée de la méthode de référence jQuery : Guide de démarrage rapide jQuery est une bibliothèque JavaScript populaire largement utilisée dans le développement de sites Web. Elle simplifie la programmation JavaScript et fournit aux développeurs des fonctions et fonctionnalités riches. Cet article présentera en détail la méthode de référence de jQuery et fournira des exemples de code spécifiques pour aider les lecteurs à démarrer rapidement. Présentation de jQuery Tout d'abord, nous devons introduire la bibliothèque jQuery dans le fichier HTML. Il peut être introduit via un lien CDN ou téléchargé
Comment utiliser la méthode de requête PUT dans jQuery ?
Feb 28, 2024 pm 03:12 PM
Comment utiliser la méthode de requête PUT dans jQuery ? Dans jQuery, la méthode d'envoi d'une requête PUT est similaire à l'envoi d'autres types de requêtes, mais vous devez faire attention à certains détails et paramètres. Les requêtes PUT sont généralement utilisées pour mettre à jour des ressources, comme la mise à jour de données dans une base de données ou la mise à jour de fichiers sur le serveur. Ce qui suit est un exemple de code spécifique utilisant la méthode de requête PUT dans jQuery. Tout d'abord, assurez-vous d'inclure le fichier de la bibliothèque jQuery, puis vous pourrez envoyer une requête PUT via : $.ajax({u
Analyse approfondie : les avantages et les inconvénients de jQuery
Feb 27, 2024 pm 05:18 PM
jQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités, largement utilisée dans le développement front-end. Depuis sa sortie en 2006, jQuery est devenu l'un des outils de choix pour de nombreux développeurs, mais dans les applications pratiques, il présente également certains avantages et inconvénients. Cet article analysera en profondeur les avantages et les inconvénients de jQuery et l'illustrera avec des exemples de code spécifiques. Avantages : 1. Syntaxe concise La conception syntaxique de jQuery est concise et claire, ce qui peut grandement améliorer la lisibilité et l'efficacité d'écriture du code. Par exemple,
Comment supprimer l'attribut height d'un élément avec jQuery ?
Feb 28, 2024 am 08:39 AM
Comment supprimer l'attribut height d'un élément avec jQuery ? Dans le développement front-end, nous rencontrons souvent le besoin de manipuler les attributs de hauteur des éléments. Parfois, nous pouvons avoir besoin de modifier dynamiquement la hauteur d'un élément, et parfois nous devons supprimer l'attribut height d'un élément. Cet article explique comment utiliser jQuery pour supprimer l'attribut height d'un élément et fournit des exemples de code spécifiques. Avant d'utiliser jQuery pour exploiter l'attribut height, nous devons d'abord comprendre l'attribut height en CSS. L'attribut height est utilisé pour définir la hauteur d'un élément
Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page
Feb 28, 2024 pm 09:06 PM
Titre : jQuery Astuces : Modifier rapidement le texte de toutes les balises a de la page En développement web, nous avons souvent besoin de modifier et d'exploiter des éléments de la page. Lorsque vous utilisez jQuery, vous devez parfois modifier le contenu textuel de toutes les balises de la page en même temps, ce qui peut économiser du temps et de l'énergie. Ce qui suit explique comment utiliser jQuery pour modifier rapidement le texte de toutes les balises a de la page et donne des exemples de code spécifiques. Tout d'abord, nous devons introduire le fichier de la bibliothèque jQuery et nous assurer que le code suivant est introduit dans la page : <
Utilisez jQuery pour modifier le contenu textuel de toutes les balises
Feb 28, 2024 pm 05:42 PM
Titre : utilisez jQuery pour modifier le contenu textuel de toutes les balises. jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer les opérations DOM. En développement web, nous rencontrons souvent le besoin de modifier le contenu textuel de la balise de lien (une balise) sur la page. Cet article expliquera comment utiliser jQuery pour atteindre cet objectif et fournira des exemples de code spécifiques. Tout d’abord, nous devons introduire la bibliothèque jQuery dans la page. Ajoutez le code suivant dans le fichier HTML :
Comprendre le rôle et les scénarios d'application de eq dans jQuery
Feb 28, 2024 pm 01:15 PM
jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer la manipulation DOM et la gestion des événements dans les pages Web. Dans jQuery, la méthode eq() est utilisée pour sélectionner des éléments à une position d'index spécifiée. Les scénarios d'utilisation et d'application spécifiques sont les suivants. Dans jQuery, la méthode eq() sélectionne l'élément à une position d'index spécifiée. Les positions d'index commencent à compter à partir de 0, c'est-à-dire que l'index du premier élément est 0, l'index du deuxième élément est 1, et ainsi de suite. La syntaxe de la méthode eq() est la suivante : $("s
Comment savoir si un élément jQuery possède un attribut spécifique ?
Feb 29, 2024 am 09:03 AM
Comment savoir si un élément jQuery possède un attribut spécifique ? Lorsque vous utilisez jQuery pour exploiter des éléments DOM, vous rencontrez souvent des situations dans lesquelles vous devez déterminer si un élément possède un attribut spécifique. Dans ce cas, nous pouvons facilement implémenter cette fonction à l'aide des méthodes fournies par jQuery. Ce qui suit présentera deux méthodes couramment utilisées pour déterminer si un élément jQuery possède des attributs spécifiques et joindra des exemples de code spécifiques. Méthode 1 : utilisez la méthode attr() et l'opérateur typeof // pour déterminer si l'élément a un attribut spécifique
