canvas.toDataaURL()跨域问题 Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘ Tainted canvases may...

于 2024-03-11 16:58:12 发布
阅读量747 收藏 10
点赞数 6
分类专栏： 解决方案 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33982898/article/details/136628678
版权
文章讲述了如何通过JavaScript在处理本地和网络MP4文件时避免FailedtoexecutetoDataURLonHTMLCanvasElement错误，重点介绍了通过设置`crossOrigin`属性解决跨域问题的方法，包括video标签、img标签以及使用Image对象时的处理方式。
摘要由CSDN通过智能技术生成

引言

  • 通过js提取视频帧，主要通过canvas.toDataURL()处理，本地mp4文件可行，网络mp4文件报错Failed to execute 'toDataURL' on 'HTMLCanvasElement' Tainted canvases may not be exported.
  • img文件同理

解决

这是由于跨域造成的，当前网站访问非同源文件。

场景1：video标签上添加属性 crossOrigin="anonymous"

<video width="640" controls autoplay muted crossOrigin="anonymous">

场景2：img标签上添加属性 crossOrigin="anonymous"

<img src="" alt="" crossOrigin="anonymous" />

场景3：如果是通过js创建Image对象

var img = new Image();
img.crossOrigin = "Anonymous";
img.setAttribute('crossOrigin', 'anonymous')  // 二选一

img.src = url + '?time=' + new Date().valueOf(); // 添加时间防止从缓冲中取
我不当帕鲁谁当帕鲁
关注
专栏目录
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may n...
weixin_34417200的博客
09-29 3635
canvas绘制图片，由于浏览器的安全考虑，如果在使用canvas绘图的过程中，使用到了外域的图片资源，那么在toDataURL()时会抛出安全异常： Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 解决...
exception:Failed to execute 'toDataURL' on 'HTMLCanvasElement' 解决方案
weixin_30625691的博客
04-16 1万+
1.情景展示 　　当使用canvas 将图片转为base64报错信息如下： 　　 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported 2.解决方案 　　第一种情况：本地测试&图片引自本地 　　...
快速解决Canvas.toDataURL 图片跨域的问题
01-19
如题，在将页面的图片地址进行本地输出时（Html2Canvas.js），因不同源存在跨域问题，会出现toDataURL访问权限问题： 【Redirect at origin ‘http://sub1.xx.com’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://sub2.xx.com’ is therefore no
Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may no
weixin_49295874的博客
08-03 1万+
受污染的画布
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
热门推荐
weixin_34249678的博客
11-24 2万+
2019独角兽企业重金招聘Python工程师标准>>> ...
canvas生成图片toDataURL报错(Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasEl)
sumimg的博客
04-01 1万+
现象：在使用canvas的toDataURL（）方法时，控制台有时会报错：Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. 原因：这是由于之前由drawImage（）向canvas导入的图片跨域而导致的。 解决方法： 1、在引用图片之前打开跨域资源允许权限（一定要注意顺序）： var img=new Image; img.setA
视频截图Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvas处理
weixin_43341974的博客
10-14 1605
2021-10-14背景系统环境报错原因报错截图处理过程最终结果 背景 因为工作需要，所以研究了一下vue-video-player。使用起来很方便，但是也遇到一个不小的坑，搞的我欲仙欲死。在此记录一下留给后面的人们，如果文章对你有帮助的话请留言一下吧，让我知道自己的经验有帮助到他人。 系统环境 windows10、vue2.6、vue-video-player5.0.2 报错原因 视频截图中使用的视频来源跨域 报错截图 处理过程 遇到这个问题第一时间一定是百度啦，各种各样的答案，五花八门的方法总之最后都
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.但是没有跨域
05-23
2. 如果你无法控制图片的跨域属性，可以尝试将图片绘制到 canvas 上时使用 `toBlob()` 方法代替 `toDataURL()` 方法。这样可以避免将图片转换为 base64 格式，从而避免“Tainted canvases may not be exported”错误...
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
01-19
本文介绍了Canvas引入跨域的图片导致toDataURL()报错...Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. 经过了解，需要在图片首次引用时，设置crossOrigin字段：
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
最新发布
01-13
`Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported` 是一个常见的错误消息，它表示在尝试将带有跨域图像的画布导出为数据URL时发生了问题。这通常是由于浏览器的安全...
canvas.toDataURL时出现图片资源跨域问题，可行性前端解决方案
weixin_44748340的博客
12-22 1681
canvas.toDataURL时出现图片资源跨域问题
html2canvas 报错：Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement : Tainted canvases may not be ...
杨杨吖的博客
10-10 3829
html2canvas 报错：Failed to execute 'toDataURL' on 'HTMLCanvasElement : Tainted canvases may not be ...
canvas toDataUrl 跨域问题
weixin_30345055的博客
10-24 413
使用canvas 的 toDataUrl方法会遇到跨域问题 chrome 会报下面的错误： Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. Firefox 会报下面的错误： Securit...
canvas.toDataURL图片跨域的问题解决
xuan的博客
08-27 1910
1.报错 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 2.原因 图片的跨域会导致canvas.toDataURL（）失败报错。 3.解决图片跨域 （1）打开跨域资源允许权限 var img=new Image(); img.crossOrigin...
stack: “Error: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainte
心随梦飞
07-25 799
用 html2canvas 想把 canvas 转成图片，使用以下方法： canvas.toDataURL("image/png") 在开发者工具里正常，但是真机报错： stack: "Error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 最终添加参数解决： allowTaint:true, useCORS: true, ...
Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement,在canvas.toDataURL()执行时候报错解决方案
xuan2717的博客
07-20 2069
Failed to execute 'toDataURL' on 'HTMLCanvasElement,在canvas.toDataURL()执行时候报错解决方案
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值