canvas加载base64字符串图片 canvas转base64图片错误

canvas加载base64字符串图片 canvas转base64图片错误

碰到一个项目需求，需要将后台传过来的图片还有数据合成一张图片，（里面有个连接要转成二维码），这个时候第一下想到的肯定就是用canvas，我们先来看一下需求和步骤：

1. 生成一个背景图片
2. 将二维码连接转base64
3. 生成二维码图片
4. 将背景图片画到canvas上
5. 将二维码图片滑到canvas上
6. 将canvas转base64（因为需求要将生成的图片发出去）

话不多少，上代码

// 我们先生成背景图片, 背景图片是外链，这里只体现逻辑
const bgImg = new Image();
bg.src = 'http://bg.jpg';

// 将二维码连接转base64，有相关js插件，这里不多说
const qrCode = createQrCode(qrCode);
const qrCodeImg = new Image();
qrCodeImg.src = qrCode;

//生成canvas

const canvas = document.createElement('canvas');
canvas.height = 900;
canvas.width = 620;
const ctx = canvas.getContext('2d');
ctx.drawImage(bgImg, 0, 0, 260, 900);
ctx.drawImage(QrCodeImg, 0, 0, 100, 100);

以上代码都只体现逻辑，具体实现就不多说了
这时候我们可以看到我们想要的图形了，但是这个时候还是canvas，canvas在微信上不能长按发送保存和识二维码的，这个时候我们就要转成真的图片了

const imgUrl = canvas.toDataURL('image/png');
<img src="imgUrl"/>

理论上这个时候我们应该就能得到我们想要的图片了。可现实总是这么残酷，我们会发现报错了

这是因为我们再canvas上使用了外链图片，也就是跨域了，所以我们需要在img上加上一个属性

image.setAttribute('crossOrigin', 'anonymous');
// 或者
image.crossOrigin = '*';
// 切记不使用url图片时，一定要把上面这一行注释掉，否则在低版本iOS上就会有问题

现在就可以得到我们想要的效果了，切记base64 的图片画到canvas上别加 crossOrigin 属性，自己当时就是遇到了这么坑，找了我几个小时。现在分享出来，希望对碰到同样问题的朋友能有帮助。