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

根据qrcode的文档说明：https://github.com/davidshimj...

<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)))
        })
    }
}

完美。如果你发现有bug或者有优化空间，评论里留言，一起解决问题，给大家分享有用的代码。

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

jsoncode

引用和评论

低成本·无任何依赖·实现大文件pdf预览功能-带下载进度