视频截图Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvas处理

最新推荐文章于 2024-07-31 09:57:55 发布
最新推荐文章于 2024-07-31 09:57:55 发布
阅读量1.5k 收藏 6
点赞数 7
文章标签： html vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43341974/article/details/120768069
版权

2021-10-14

背景

因为工作需要，所以研究了一下vue-video-player。使用起来很方便，但是也遇到一个不小的坑，搞的我欲仙欲死。在此记录一下留给后面的人们，如果文章对你有帮助的话请留言一下吧，让我知道自己的经验有帮助到他人。

系统环境

windows10、vue2.6、vue-video-player5.0.2

报错原因

视频截图中使用的视频来源跨域

报错截图

在这里插入图片描述

处理过程

遇到这个问题第一时间一定是百度啦，各种各样的答案，五花八门的方法总之最后都没有解决。但是对问题的解决还是有很大帮助的，在此列举一下网上的方法：
1、给video设置crossorigin=‘Anonymous’
2、在服务器设置Access-Control-Allow-Origin *
3、在视频的地址后面添加随机数

video.src =video.src+'?v='
最低0.47元/天 解锁文章
超级九尾仔
关注
解决canvas跨域问题(图片,视频资源跨域)
小结巴巴的博客
03-07 2927
  添加跨域条件   crossorigin="anonymous"   【Redirect at origin 'http://xxx.xx.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is ...
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()报错的解决方案全都在这了
11-21
报错详尽信息 Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. 关键词 canvas.toDataURL() crossOrigin Access-Control-Allow-Origin 前言 最近在做一个创意类的图片合成工具，大概齐就是通过拼接自定义的文字和图片信息生成一张商品图片类似的功能，项目中用到了fabric.js这个画板库，最后一步在保存图片的时候报上面的一长串错误，墙内墙外
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
异度空间
08-12 4017
canvas.toDataURL("image/jpg;base64;");canvas提交img时报错： Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 原因是： your local drive is de...
vue使用video播放视频跨域问题“has been blocked by CORS policy: No ‘Access-Control-Allow-Origin
最新发布
海贼王某人的博客
07-31 727
起因：项目需要加一个视频播放功能，线上资源和网页url不是一个域名，导致跨域了无法播放，报错。我真的服了，网上答案十个九个都是错的，那些人发出来的东西自己都不验证一下吗，多了一个 i 让我好找啊，最后还是解决了，如果你用crossOrign无法解决就把 i 加上吧，我也不知道什么原因，反正的我不加 i 就可以播放了，记录一下这个大坑。注意：是crossOrign=“anonymous”，不是crossOrigin=“anonymous”
vue中视频截图下载保存/存储实现（Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvas报错处理方法）
Zeng的博客
01-19 972
获取video必须在mounted设置setAttribute(“crossorigin”, “Anonymous”) 否则会报 toDataURL 错误
vue html2canvas截屏报Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘
qq_43487084的博客
10-31 3673
【代码】vue html2canvas截屏报Failed to execute 'toDataURL' on 'HTMLCanvasElement'
HTMLCanvasElement.toDataURL()
11-22 252
HTMLCanvasElement.toDataURL()方法返回一个包含图片展示的data URI。可以使用type参数其类型，默认为PNG格式。图片的分辨率为96dpi。 如果画布的高度或宽度是0，那么会返回字符串“data:,”。 如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。 Chr...
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工程师标准>>> ...
openlayers Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
08-25
openlayers中的"Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."错误是由于浏览器的安全策略导致的。当使用canvas绘制图片时，如果涉及到外域的图片资源，浏览器会...
html2canvas 截图空白 或出现toDataURL‘ on ‘HTMLCanvasElement或img标签没截下来 的所有解决办法
weixin_45721912的博客
08-31 3324
【代码】html2canvas 截图空白 或出现toDataURL' on 'HTMLCanvasElement或img标签没截下来 的所有解决办法。
Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement,在canvas.toDataURL()执行时候报错解决方案
xuan2717的博客
07-20 2064
Failed to execute 'toDataURL' on 'HTMLCanvasElement,在canvas.toDataURL()执行时候报错解决方案
Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported
齐枫的博客
04-26 1万+
启用了 CORS 的图片 HTML 规范中图片有一个 crossorigin 属性，结合合适的 CORS 响应头，就可以实现在画布中使用跨域 元素的图像。 什么是“被污染”的 canvas? 尽管不通过 CORS 就可以在画布中使用图片，但是这会污染画布。一旦画布被污染，你就无法读取其数据。例如，你不能再使用画布的 toBlob(), toDataURL() 或 getImageData(...
头像裁剪和Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases m
长歌的博客
04-08 1786
头像裁剪的主要实现是同事找来发我的，用着还不错。记一下，可以用作以后研究。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-
js截取视频第一帧_JS获取HTML video标签视频第一帧
weixin_39561673的博客
12-19 623
capture screen(function(){var video, output;var scale = 0.8;var initialize = function() {output = document.getElementById("output");video = document.getElementById("video");video.addEventListener('loa...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值