Ringkasan menjana imej kod QR dengan kemahiran JavaScript_javascript

Ringkasan:

Beginilah cara Ensiklopedia Baidu memperkenalkan kod QR: Kod QR (Kod Respons Pantas), juga dikenali sebagai kod bar 2D, ialah kod hitam putih yang menggunakan angka geometri tertentu yang diedarkan pada satah (arah dua dimensi) mengikut tertentu. peraturan. Grafik alternatif adalah kunci kepada semua data maklumat. Dalam aktiviti komersil moden, pelbagai aplikasi boleh direalisasikan, seperti: anti-pemalsuan/pengesanan produk, tolakan pengiklanan, pautan laman web, muat turun data, urus niaga komoditi, kedudukan/navigasi, aplikasi e-dagang, pengurusan kenderaan, penghantaran maklumat , dsb. Pada masa kini, aplikasi fungsi imbasan (dirujuk sebagai 313) pada telefon pintar telah menjadikan kod QR lebih biasa Dengan perkembangan pesat industri Internet Perkara domestik, lebih banyak penyelesaian aplikasi teknologi kod QR telah dibangunkan, dan kod QR telah menjadi. pintu masuk ke Internet mudah alih benar-benar menjadi kenyataan.

Kita boleh melihat kod QR di mana-mana apabila melayari Internet, jadi bagaimana untuk menjana kod QR di bahagian hadapan? Hari ini saya akan berkongsi generasi hadapan bagi kod QR.

Pengenalan:

QRCode.js ialah perpustakaan js yang menyokong kanvas HTML5 dan penanda jadual dalam DOM merentas penyemak imbas. Perkara yang kami gunakan adalah berdasarkan QRCode.js.

Pelayar:

IE6~10, Chrome, Firefox, Safari, Opera, Safari Mudah Alih, Android, Windows Mobile, DLL.

jquery-qrcode:

ciri jquery-qrcode: operasi mudah, saiz kecil, hanya 14k selepas pemampatan, tetapi tidak menyokong pengekodan Cina.

<script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.qrcode.min.js"></script>
<div id="qrcode"></div>
<script>
$(function(){
$('#qrcode').qrcode("http://www.cnblogs.com/xiyangbaixue");
// 更详细的配置
// $('#qrcode').qrcode({
// text: "http://www.cnblogs.com/xiyangbaixue", // 要编码的字符串
// width: 50, // 定义宽度
// height: 50, // 定义高度
// background: "#ccc", // 背景色
// foreground: "red" // 前景色
// });
})
</script>

Kesan:

qrcodejs:

Ciri qrcodejs: Kod QR yang dijana oleh China tidak akan kelihatan bercelaru apabila diimbas dan anda boleh memilih elemen yang hendak digunakan untuk melukis kod QR.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<div id="qrcode"></div>
<script>
new QRCode(document.getElementById("qrcode"), "http://www.cnblogs.com/xiyangbaixue");
// 或者
// new QRCode(document.getElementById("qrcode"), {
// text: "http://www.cnblogs.com/xiyangbaixue",
// width: 50,
// height: 50,
// background: "#ccc",
// foreground: "red"
// });
</script>

Gunakan svg:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="qrcode"/>
</svg>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,
height : 100,
useSVG: true
});
qrcode.makeCode("http://www.cnblogs.com/xiyangbaixue");
// qrcode.clear(); // 清除二维码
</script>

Kesan:

Parameter konfigurasi:

memaparkan rentetan

Konfigurasikan elemen nod yang digunakan untuk melukis kod QR Pilihannya ialah jadual, svg dan kanvas

Turutan pilihan lalai ialah kanvas -> svg ->

rentetan teks

Rentetan untuk mengekod

Lalai: ""

nombor lebar

Panjang kod QR, unit ialah px

Perlu diingat bahawa apabila menggunakan jadual atau svg untuk melukis kod QR, ia akan dikurangkan dengan sewajarnya supaya dimensi matriks kod QR boleh dibahagikan.

Lalai: 256

nombor ketinggian

Lebar kod QR, unit ialah px

Perlu diingat bahawa apabila menggunakan jadual atau svg untuk melukis kod QR, ia akan dikurangkan dengan sewajarnya supaya dimensi matriks kod QR boleh dibahagikan.

Lalai: 256

nombor Tahap yang betul

Tahap pembetulan ralat boleh menjadi 0, 1, 2, atau 3. Semakin besar nombor, semakin tinggi tahap pembetulan ralat yang diperlukan

Lalai: 3

warna latar belakang

Warna latar belakang

Lalai: #FFFFFF

warna latar depan

Warna latar depan

Lalai: #000000