canvas加载base64字符串图片 canvas转base64图片错误
碰到一个项目需求,需要将后台传过来的图片还有数据合成一张图片,(里面有个连接要转成二维码),这个时候第一下想到的肯定就是用canvas,我们先来看一下需求和步骤:
- 生成一个背景图片
- 将二维码连接转base64
- 生成二维码图片
- 将背景图片画到canvas上
- 将二维码图片滑到canvas上
- 将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
属性,自己当时就是遇到了这么坑,找了我几个小时。现在分享出来,希望对碰到同样问题的朋友能有帮助。