safari使用canvas引入域外的图片

最新推荐文章于 2024-04-10 15:10:01 发布

月迷津渡丶

最新推荐文章于 2024-04-10 15:10:01 发布

阅读量1.2k

点赞数

分类专栏： Web js

本文链接：https://blog.csdn.net/oYueMiJinDu/article/details/78987898

版权

Web 同时被 2 个专栏收录

145 篇文章 0 订阅

订阅专栏

21 篇文章 0 订阅

订阅专栏

> Uncaught DOMException: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

如遇到跨域问题,在非safari中一般可以添加:

const _img = new Image
 _img.setAttribute('crossOrigin', 'anonymous');//这一行

但是safari无效

一个解决方案就是,先把图片转为本地blob资源

const img = new Image
fetch('xxx.png',{
    mode: 'cors',
    headers: {
        "Content-Type": "application/json",
    },
}).then(response=>response.blob()).then(myBlob=>{
    let objectURL = URL.createObjectURL(myBlob);
    img.src = objectURL;
    
    img.onload = ()=>{
       // ctx.drawImage(img,0,0,1,1)
      //  canvas.toBlob(e=>{
       //     console.log(e)
       // })
    }
})