github: qrcode.js生成二維碼并下載--BY LucaLJX
Paste_Image.png
知識點
- base64數(shù)據(jù)形式
Base64是一種用64個字符來表示任意二進制數(shù)據(jù)的方法餐曹。 -- 廖雪峰官方網(wǎng)站
Base64編碼有哪些情景需求盖腕？ -- 知乎
案例場景
- 后臺生成邀請鏈接，前端拿到鏈接之后處理成二維碼圖片并下載到本地，用于轉(zhuǎn)發(fā)。
qrcode.js及jquery-qrcode.js實現(xiàn)生成二維碼
- qrcode.js github地址： qrcode
- jquery-qrcode.js github地址： jquery-qrcode
1.html 代碼
<div id="qrcode"></div>
<!-- 用于生成二維碼的容器 -->
2.js 代碼
// qrcode.js
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "i am the first qrcode",
width: 128, //生成的二維碼的寬度
height: 128, //生成的二維碼的高度
colorDark : "#000000", // 生成的二維碼的深色部分
colorLight : "#ffffff", //生成二維碼的淺色部分
correctLevel : QRCode.CorrectLevel.H
});
//jquery-qrcode.js
var qrcode = $('#qrcode').qrcode({
width: 128,
height: 128,
text: "size doesn't matter"
});
3.qrcode.js 與jquery-qrcode.js區(qū)別
- qrcode.js可以指定生成的二維碼深色、淺色區(qū)域塊的顏色拘领，jquery-qrcode.js只能默認黑白兩色
- qrcode.js支持clear()和makeCode()方法，用于便捷清空二維碼樱调、更換二維碼约素，jquery-qrcode.js不支持
4.qrcode.js生成二維碼原理
img-1.jpg
- qrcode.js在用于生成二維碼的容器#qrcode內(nèi)生成一個canvas標簽和一個img標簽，并且以base64的編碼格式描述圖片信息笆凌。
點擊按鈕业汰，生成的二維碼圖片保存到本地
實現(xiàn)原理
- 將base64編碼格式的圖片轉(zhuǎn)換成canvas畫布
- 利用toDataUrl()方法將canvas畫布信息轉(zhuǎn)化為可供下載的url信息 toDataUrl()
- 構(gòu)建下載鏈接并模擬點擊，將圖片下載到本機
基于qrcode.js案例demo實現(xiàn)將生成的二維碼保存為本地圖片
- 構(gòu)建一個用于下載的空的a標簽
<a id="downloadLink"></a>
<button type="button" onclick="downloadClick()">下載</button>
- 將base64圖片構(gòu)建成畫布并模擬點擊a標簽下載
//js
function downloadClick () {
// 獲取base64的圖片節(jié)點
var img = document.getElementById('qrcode').getElementsByTagName('img')[0];
// 構(gòu)建畫布
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0);
// 構(gòu)造url
url = canvas.toDataURL('image/png');
// 構(gòu)造a標簽并模擬點擊
var downloadLink = document.getElementById('downloadLink');
downloadLink.setAttribute('href', url);
downloadLink.setAttribute('download', '二維碼.png');
downloadLink.click();
}
//jquery
function downloadClick () {
// 獲取base64的圖片節(jié)點
var img = $('#qrcode img').[0];
// 構(gòu)建畫布
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0);
// 構(gòu)造url
url = canvas.toDataURL('image/png');
// 構(gòu)造a標簽并模擬點擊
var downloadLink = $('#downloadLink').attr("href", url).attr("download", "二維碼.png");
downloadLink[0].click();
}
BY--LucaLJX
