解決qrcode.js生成二維碼時(shí)必須定義一個(gè)空div的問題
根據(jù)qrcode的文檔說明:https://github.com/davidshimjs/qrcodejs
<div id="qrcode"></div> <script type="text/javascript"> new QRCode(document.getElementById("qrcode"), "sample text"); // or new QRCode(document.getElementById("qrcode"), { text: 'sample text', width: 200, height: 200, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H });
要有一個(gè)元素存放二維碼,
可以看到這個(gè)div中被追加了canvas,img兩個(gè)標(biāo)簽。
但是我想不想創(chuàng)建這個(gè)div啊。然后我就找到了node-qrcode
他有兩種用法:
<html> <body> <canvas id="canvas"></canvas> <script src="bundle.js"></script> </body> </html> <script> var QRCode = require('qrcode') var canvas = document.getElementById('canvas') QRCode.toCanvas(canvas, 'sample text', function (error) { if (error) console.error(error) console.log('success!'); }) </script>
很顯然這種和前面那個(gè)一樣,需要先創(chuàng)建一個(gè)標(biāo)簽。
var QRCode = require('qrcode') QRCode.toDataURL('I am a pony!', function (err, url) { console.log(url) })
終于找到我想要的了,不過,這里的url是base64,如果二維碼過大的話,使用base64進(jìn)行圖片渲染,會(huì)導(dǎo)致瀏覽器崩潰,這個(gè)問題后面解決。
那么問題又來了,這個(gè)node-qrcode只能用在vue中使用(不能直接在瀏覽器運(yùn)行,需要特殊處理),如果想直接使用(或在vue中使用cdn)必須用第一種模式。
這問題有繞回來了。
暫時(shí)沒有好的方案。自己二次優(yōu)化一下吧。
既然第一種方案里,有一個(gè)img標(biāo)切,是不是可以讀取圖片流,然后自己處理?
var div = document.createElement('div'); var size = 200; var padding = 20; var bg = '#ffffff'; new QRCode(div, { text: val, width: size, height: size, colorDark: "#000000", colorLight: bg, correctLevel: QRCode.CorrectLevel.H }); console.log(div.querySelector('img').src);
發(fā)現(xiàn)是空的''.
根據(jù)以往經(jīng)驗(yàn),這里的圖片,可能需要時(shí)間來渲染?
div.querySelector('img').addEventListener('load', (event) => { var img = event.target; console.log(img.src); })
果然拿到了base64地址。
到此,就已經(jīng)解決所有問題,剩下的,就是自己畫個(gè)二維碼了(這種方法生成的二維碼,沒有邊距留白,非常丑)
// https://github.com/davidshimjs/qrcodejs export default { imageBase64ToBlob(urlData, type = 'image/jpeg') { var ab = null; try { var arr = urlData.split(',') var mime = arr[0].match(/:(.*?);/)[1] || type; // 去掉url的頭,并轉(zhuǎn)化為byte var bytes = window.atob(arr[1]); // 處理異常,將ascii碼小于0的轉(zhuǎn)換為大于0 ab = new ArrayBuffer(bytes.length); // 生成視圖(直接針對(duì)內(nèi)存):8位無符號(hào)整數(shù),長(zhǎng)度1個(gè)字節(jié) var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob([ab], { type: mime }); } catch (e) { ab = new ArrayBuffer(0); return new Blob([ab], { type: type, }); } }, createQr(val, back) { var div = document.createElement('div'); var size = 200; var padding = 20; var bg = '#ffffff'; new QRCode(div, { text: val, width: size, height: size, colorDark: "#000000", colorLight: bg, correctLevel: QRCode.CorrectLevel.H }); var canvas = div.querySelector('canvas'); div.querySelector('img').addEventListener('load', (event) => { var img = event.target; var ctx = canvas.getContext('2d'); ctx.fillStyle = bg; ctx.fillRect(0, 0, size, size); // ctx.clearRect(0, 0, size, size); ctx.drawImage(img, 0, 0, img.width, img.height, padding, padding, size - 2 * padding, size - 2 * padding); let url = canvas.toDataURL(); back(URL.createObjectURL(this.imageBase64ToBlob(url))) }) } }
到此這篇關(guān)于解決qrcode.js生成二維碼時(shí)必須定義一個(gè)空div的問題的文章就介紹到這了,更多相關(guān)qrcode.js二維碼定義一個(gè)空div內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
jQuery-App輸入框?qū)崿F(xiàn)實(shí)時(shí)搜索
這篇文章主要為大家詳細(xì)介紹了jQuery-App輸入框?qū)崿F(xiàn)實(shí)時(shí)搜索,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11以WordPress為例講解jQuery美化頁面Title的方法
鼠標(biāo)移動(dòng)到超鏈接時(shí)顯示Title提示即是所謂Title美化的一般手段,這里我們就以WordPress為例講解jQuery美化頁面Title的方法,需要的朋友可以參考下2016-05-05jquery綁定原理 簡(jiǎn)單解析與實(shí)現(xiàn)代碼分享
下面的內(nèi)容只是自己的一些理解,水平有限,難免有錯(cuò),望指正2011-09-09修改jQuery Validation里默認(rèn)的驗(yàn)證方法
在最近做的一個(gè)項(xiàng)目中,使用jQuery Validation驗(yàn)證日期,遇到的問題和一個(gè)沒有預(yù)料到的情況是,在ASP.NET MVC 3的項(xiàng)目中,對(duì)于 input type="date" data-val="true"的元素,如果調(diào)用form的valid方法驗(yàn)證form,雖然我沒有添加日期驗(yàn)證的設(shè)置2012-02-02