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.
Pada halaman, tambahkan elemen kosong (gunakan div di sini) di mana kod QR perlu dipaparkan
Apabila anda perlu menjana kod QR, hubungi penyata untuk menjananya secara terus.
$("#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:
$("#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:
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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
