解决qrcode.js生成二维码时必须定义一个空div的问题

(编辑：jimmy 日期: 2024/12/27 浏览：3 次 )

根据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="/UploadFiles/2021-04-02/bundle.js">

很显然这种和前面那个一样，需要先创建一个标签。


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(/:(.*"#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)))
  })
 }
}

上一篇：如何在postman测试用例中实现断言过程解析
下一篇：Electron 打包问题:electron-builder 下载各种依赖出错(推荐)