qrcode.js二维码定义一个空div 解决qrcode.js生成二维码时必须定义一个空div的问题
jsoncode 人气:0根据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 });
要有一个元素存放二维码,
可以看到这个div中被追加了canvas,img两个标签。
但是我想不想创建这个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>
很显然这种和前面那个一样,需要先创建一个标签。
var QRCode = require('qrcode') QRCode.toDataURL('I am a pony!', function (err, url) { console.log(url) })
终于找到我想要的了,不过,这里的url是base64,如果二维码过大的话,使用base64进行图片渲染,会导致浏览器崩溃,这个问题后面解决。
那么问题又来了,这个node-qrcode只能用在vue中使用(不能直接在浏览器运行,需要特殊处理),如果想直接使用(或在vue中使用cdn)必须用第一种模式。
这问题有绕回来了。
暂时没有好的方案。自己二次优化一下吧。
既然第一种方案里,有一个img标切,是不是可以读取图片流,然后自己处理?
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);
发现是空的''.
根据以往经验,这里的图片,可能需要时间来渲染?
div.querySelector('img').addEventListener('load', (event) => { var img = event.target; console.log(img.src); })
果然拿到了base64地址。
到此,就已经解决所有问题,剩下的,就是自己画个二维码了(这种方法生成的二维码,没有边距留白,非常丑)
// 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的头,并转化为byte var bytes = window.atob(arr[1]); // 处理异常,将ascii码小于0的转换为大于0 ab = new ArrayBuffer(bytes.length); // 生成视图(直接针对内存):8位无符号整数,长度1个字节 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))) }) } }
加载全部内容