Fabric.js Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may not be exported

Fabric.js Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

问题

想导出fabric.js canvas的绘制信息,并设置背景图片,导出是出现文章标题描述的错误

代码

    
    const imgObj = new Image()
    imgObj.src = currentHit.data

    canvas.width = imgObj.naturalWidth
    canvas.height = imgObj.naturalHeight

    fabric.Image.fromURL(currentHit.data, function (img) {   
      canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
        width: canvas.width, 
        height: canvas.height,
      });
    }, {crossOrigin: 'anonymous'});

    imgObj.setAttribute("crossOrigin",'Anonymous')
    imgObj.onload = function () {
      const a = document.createElement('a')
      a.href = canvas.toDataURL('image/png') //将画布内的信息导出为png图片数据
      a.download = 'tagger-img' //设定下载名称
      a.click() //点击触发下载
      resolve({
        err: false,
        msg: '',
      })
    }
    imgObj.onerror = function () {
      resolve({
        err: true,
        msg: "The image load error, maybe the reason is this image isn't saved in our service, can't produce local image",
      })
    }
  })
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值