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 属性,自己当时就是遇到了这么坑,找了我几个小时。现在分享出来,希望对碰到同样问题的朋友能有帮助。

  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值