QRCode.js一個生成二維碼的javascript庫

前言

最近在開發中遇到一個需求：將后端返回的鏈接轉換成二維碼，那么如何來實現呢？我們可以使用QRCode.js來解決這一問題

什么是 QRCode.js？

QRCode.js 是一個用於生成二維碼的 JavaScript 庫。主要是通過獲取 DOM 的標簽,再通過 HTML5 Canvas 繪制而成,不依賴任何庫。

基本用法

<div id="qrcode"></div>
<script type="text/javascript">
　　new QRCode(document.getElementById("qrcode"), "http://www.runoob.com");  // 設置要生成二維碼的鏈接
</script>

或者使用一些可選參數設置：

var qrcode = new QRCode("test", { text: "http://www.runoob.com", width: 128, height: 128, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H });

同樣我們可以使用以下方法：

qrcode.clear(); // 清除代碼
qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一個二維碼

瀏覽器支持

支持該庫的瀏覽器有：IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等。

實例代碼

實例一：

HTML 代碼 <input id="text" type="text" value="http://www.runoob.com" /><br />
<div id="qrcode"></div>

 CSS 代碼 #qrcode { 　width:160px; height:160px; margin-top:15px; } JavaScript 代碼 var qrcode = new QRCode("qrcode"); function makeCode () { var elText = document.getElementById("text"); if (!elText.value) { alert("Input a text"); elText.focus(); return; } qrcode.makeCode(elText.value); } makeCode(); $("#text"). on("blur", function () { makeCode(); }). on("keydown", function (e) { if (e.keyCode == 13) { makeCode(); } });

實例二：

var qrcodeOne = new QRCode(document.getElementById("qrcodeOne"), { width: 100, height: 100, colorDark : "#000000", colorLight : "#ffffff" });  qrcodeTwo.makeCode(res.productUrl);

注意

當然我們肯定要引入qrcode.js

<script type="text/javascript" src="qrcode.js"></script>

 

GitHub地址：https://github.com/davidshimjs/qrcodejs