Gunakan qrcode komponen jquery untuk menjana kod QR dan guide_jquery aplikasi

Terdapat beberapa pengiraan yang menggunakan CPU yang boleh dikira pada klien, seperti menjana kod QR.

qrcode sebenarnya mengira dan kemudian menggunakan jquery untuk mencapai pemaparan dan lukisan grafik. Menyokong kaedah kanvas dan jadual untuk menjana kod QR yang kami perlukan.

Penggunaan khusus
qrcode ialah komponen jquery dan memerlukan sekurang-kurangnya dua js, ​​iaitu jquery dan jquery.qrcode. Anda boleh pergi ke https://github.com/jeromeetienne/jquery-qrcode untuk mendapatkan kod terkini.

Salin kod Kod adalah seperti berikut:

Pada halaman, tambahkan elemen kosong (gunakan div di sini) di mana kod QR perlu dipaparkan

Salin kod Kod adalah seperti berikut:

Apabila anda perlu menjana kod QR, hubungi penyata untuk menjananya secara terus.

Salin kod Kod adalah seperti berikut:

$("#qrcode").qcrode("http://www.jb51.net");//Halaman yang perlu dijana

Parameter terperinci

Perihalan Nilai Lalai Parameter
render kaedah rendering kanvas, menyokong kanvas dan jadual
lebar Tiada Lebar
tinggi Tiada Tinggi
teks Tiada URL perlu dijana

Seperti:

Salin kod Kod adalah seperti berikut:

$("#qrcode").qcrode({
render: "jadual",
Lebar: 200,
tinggi: 200,
teks: "http://www.jb51.net"
});

Cara menyelesaikan masalah aksara Cina dalam URL

Semasa percubaan, kami mendapati bahawa kod QR dengan kandungan bahasa Cina tidak dapat dikenali Dengan mencari pelbagai maklumat, kami mengetahui bahawa jquery-qrcode menggunakan kaedah charCodeAt() untuk penukaran pengekodan. Kaedah ini akan memperoleh pengekodan Unikodnya secara lalai Jika terdapat kandungan Cina, rentetan mesti ditukar kepada UTF-8 sebelum menjana kod QR, dan kemudian menjana kod QR. Anda boleh menukar rentetan bahasa Cina melalui fungsi berikut:

Salin kod Kod adalah seperti berikut:

fungsi kepadaUtf8(str) {   
    var keluar, i, len, c;   
    keluar = "";   
    len = str.panjang;   
    untuk(i = 0; i < len; i ) {   
        c = str.charCodeAt(i);   
        jika ((c >= 0x0001) && (c <= 0x007F)) {   
            keluar = str.charAt(i);   
        } lain jika (c > 0x07FF) {   
            keluar = String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));   
            keluar = String.fromCharCode(0x80 | ((c >>  6) & 0x3F));   
            keluar = String.fromCharCode(0x80 | ((c >>  0) & 0x3F));   
        } lain {   
            keluar = String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));   
            keluar = String.fromCharCode(0x80 | ((c >>  0) & 0x3F));   
        }   
    }   
    kembali keluar;   
}

下载二维码

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

复制代码 代码如下:

muat turun fungsi(canvasElem, nama fail, imageType) {
    acara var, saveLink, imageData, defalutImageType;
    defalutImageType = 'png';//定义默认图片类型
    imageData = canvasElem.toDataURL(imageType || defalutImageType);//将canvas元素转化为data imej
    saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    saveLink.href = imageData;
    saveLink.download = nama fail;
    acara = document.createEvent('MouseEvents');
    event.initMouseEvent('klik', benar, palsu, tetingkap, 0, 0, 0, 0, 0, palsu, palsu, palsu, palsu, 0, batal);
    saveLink.dispatchEvent(event);
};

在angular中的简单封装

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

。

复制代码

代码如下:

var appModule = angulaire.module('app', []);
appModule.directive('qrcode', function() {
Retour {
        restreindre : "A",
portée : {
texte : '=',
options : '='
},
         lien : function(scope, elem, attrs) {
          var $elem, options;
             $elem = $(elem);
options = { //Obtenir la largeur et la hauteur de l'élément
               largeur : $elem.width(),
Hauteur : $elem.height()
           };
          angulaire.extend(options, scope.options);
scope.$watch('text', function(newText) {
                if (newText) {
options.text = nouveauText;
                   $(elem).qrcode(options);//Régénérer le code QR
            }
           });
        };
};
});

La méthode de téléchargement peut être encapsulée dans un service en Angular.

Amis, vous pouvez utiliser qrcode pour générer des codes QR, c'est vraiment facile à utiliser.