使用canvas二维码绘制到图片上，并下载

需求

使用canvas二维码绘制到图片上，并下载； 注意图片需要支持跨域

1. 使用的是 ctx.drawImage
2. canvas.toDataURL('image/png');

code

import QRCodeCanvas from 'qrcode';

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = 'Anonymous';

img.src = 'https://xxx.jpg' + '?v=' + Math.random();

img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx?.drawImage(img, 0, 0, img.width, img.height);

        // 将二维码绘制到canvas上
        QRCodeCanvas.toCanvas(document.createElement('canvas'), '我是url', {
                errorCorrectionLevel: 'H',
                margin: 1,
                width: 400,
                height: 400,
        }, (error: any, qrCanvas: any) => {
                if (error) {
                        console.error('error', error);
                }
                ctx?.drawImage(qrCanvas, 0, 0, 400, 400);
                // 下载
                canvas.toBlob((blob) => {
                    const url = URL.createObjectURL(blob);
                    // 创建一个a标签，通过a标签的download属性指定文件名
                    const a = document.createElement('a');
                    a.download = '海报.png';
                    a.href = url;
                    // 将a标签插入到body中
                    document.body.appendChild(a);
                    // 触发a标签的点击事件
                    a.click();
                    // 将a标签从body中移除
                    document.body.removeChild(a);
                    // 释放URL对象
                    URL.revokeObjectURL(url);
		});
        });

}