Utilisez le composant jquery qrcode pour générer le code QR et le guide d'application_jquery

Certains calculs gourmands en CPU peuvent être calculés sur le client, comme la génération de codes QR.

qrcode calcule puis utilise jquery pour réaliser le rendu graphique et le dessin. Prend en charge les méthodes canevas et tableau pour générer le code QR dont nous avons besoin.

Utilisation spécifique
qrcode est un composant jquery et nécessite au moins deux js, ​​à savoir jquery et jquery.qrcode. Vous pouvez aller sur https://github.com/jeromeetienne/jquery-qrcode pour obtenir le dernier code.

Copier le code Le code est le suivant :

Sur la page, ajoutez un élément vide (utilisez div ici) là où le QR code doit être affiché

Copier le code Le code est le suivant :

Lorsque vous avez besoin de générer un code QR, appelez l'instruction pour le générer directement.

Copier le code Le code est le suivant :

$("#qrcode").qcrode("http://www.jb51.net");//La page à générer

Paramètres détaillés

Description de la valeur par défaut du paramètre
méthode de rendu du canevas de rendu, prend en charge le canevas et la table
largeur Aucun Largeur
hauteur Aucun Hauteur
texte Aucune URL ne doit être générée

Tel que :

Copier le code Le code est le suivant :

$("#qrcode").qcrode({
rendu : "table",
Largeur : 200,
hauteur : 200,
texte : "http://www.jb51.net"
});

Comment résoudre le problème des caractères chinois dans l'URL

Au cours de l'expérience, nous avons constaté que le code QR avec un contenu chinois ne pouvait pas être reconnu. En recherchant diverses informations, nous avons appris que jquery-qrcode utilise la méthode charCodeAt() pour encoder la conversion. Cette méthode obtiendra son encodage Unicode par défaut. S'il y a du contenu chinois, la chaîne devra être convertie en UTF-8 avant de générer le code QR, puis générer le code QR. Vous pouvez convertir des chaînes chinoises grâce aux fonctions suivantes :

Copier le code Le code est le suivant :

fonction toUtf8(str) {   
    var dehors, je, len, c ;   
    sortie = "" ;   
    len = str.length;   
    pour(i = 0; i < len; i ) {   
        c = str.charCodeAt(i);   
        if ((c >= 0x0001) && (c <= 0x007F)) {   
            out = str.charAt(i);   
        } sinon si (c > 0x07FF) {   
            out = String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));   
            out = String.fromCharCode(0x80 | ((c >>  6) & 0x3F));   
            out = String.fromCharCode(0x80 | ((c >>  0) & 0x3F));   
        } autre {   
            out = String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));   
            out = String.fromCharCode(0x80 | ((c >>  0) & 0x3F));   
        }   
    }   
    repartir ;   
>

下载二维码

用前端画出来的二维码，不是一个canvas就是一个table，如何下载呢？我们只需要将canvas的内容画到image上，下载下来即可。

复制代码 代码如下 :

téléchargement de fonction (canvasElem, nom de fichier, type d'image) {
    événement var, saveLink, imageData, defalutImageType;
    defaultImageType = 'png';//定义默认图片类型
    imageData = canvasElem.toDataURL(imageType || defalutImageType);//将canvas元素转化为image data
    saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    saveLink.href = imageData;
    saveLink.download = nom de fichier;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('clic', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    saveLink.dispatchEvent(event);
};

在angulaire中的简单封装

angular中使用，可以封装成directive。不过要确保已经引入了之前的两个js文件。

复制代码 代码如下 :

var appModule = angle.module('app', []);
appModule.directive('qrcode', function() {
Geben Sie {
zurück         einschränken: „A“,
Geltungsbereich: {
Text: '=',
Optionen: '='
},
         Link: function(scope, elem, attrs) {
          var $elem, Optionen;
             $elem = $(elem);
Optionen = { //Ermitteln Sie die Breite und Höhe des Elements
               width: $elem.width(),
Höhe: $elem.height()
           };
          angle.extend(options,scope.options);
Scope.$watch('text', function(newText) {
                if (newText) {
options.text = newText;
                   $(elem).qrcode(options);//QR-Code neu generieren
            }
           });
        };
};
});

Die Download-Methode kann in einen Dienst in Angular gekapselt werden.

Freunde, Sie können qrcode verwenden, um QR-Codes zu generieren. Ich hoffe, es gefällt Ihnen.