safari使用canvas引入域外的图片

> 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)// })}
})

safari使用canvas引入域外的图片相关推荐

Canvas引入跨域的图片导致toDataURL()报错的问题的解决
本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下: [场景] 用户打开网页,则请求腾讯COS(图片服务器)上的图片js代码.使用canvas绘图. ...
Canvas画布、SVG图片
Canvas 一.canvas 1.<canvas>标签:画布标签 (height,width,半透明),本身不具备绘图能力,可以通过脚本(通常指js)来实现 width:设置画布宽度,默 ...
原生js通过canvas和cssRules实现图片分割与重组
将一张照片分割成几段然后重新组合,按照常理来讲使用h5的canvas标签很容易就实现了,长话短说,直入正题: html : 首先创建一个img标签: <img id="img" ...
Flutter 项目编写第三方插件库文件引入，本地图片 json数据引入解析
FlutterDemo是如何一步一步搭建起来的最初就是直接新建flutter项目,就会自动建立一个入门项目.(开始项目前,需先学习Dart语言) flutter项目代码都在lib目录下编写: 新建包 ...
react引入多个图片_重新引入React：v16之后的每个React更新都已揭开神秘面纱。
react引入多个图片 In this article (and accompanying book), unlike any you may have come across before, I w ...
解决Html5用canvas绘制不出来图片的问题
转载自解决Html5用canvas绘制不出来图片的问题如果使用html5的ctx.drawImage(img,0,0);绘制不出来, 就改为: img.onload = function(){ ...
canvas应用——圆角矩形图片
前段时间写了一个canvas应用--将方形图片处理为圆形 ,最近就想把这个完善一下,所以就再补充一个canvas的圆角矩形处理方式. 例子你可以直接点击此处查看例子 ,先一睹为快. 参数参数默 ...
cocos creator 设置开启canvas 透明后半透明图片不正常的官方解决办法
cocos creator 设置开启canvas 透明后半透明图片不正常的官方解决办法必须用 one,one minus src alpha,否则 web 端的贴图渲染时会莫名其妙和 canv ...
java drawimage图片不完整_微信小程序canvas.drawImage完全显示图片问题的解决
问题描述问题产生对于微信小程序,canvas处理过程中,dramImage默认图片引用是有残缺的导入初始项目打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工 ...

safari使用canvas引入域外的图片

safari使用canvas引入域外的图片相关推荐

最新文章

热门文章