Javascript 画布已被videojs中的跨源数据污染
我尝试在画布中播放视频,但出现以下错误:Javascript 画布已被videojs中的跨源数据污染,javascript,html,Javascript,Html,我尝试在画布中播放视频,但出现以下错误: Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 我无法更改源(支持cors的服务器),那么我可以做些什么来解决这个问题 document.addEventListener('DOMContentLoaded',function(
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
我无法更改源(支持cors的服务器),那么我可以做些什么来解决这个问题
document.addEventListener('DOMContentLoaded',function(){
var v=document.getElementById('my-video');
var canvas=document.getElementById('c');
var context=canvas.getContext('2d');
var back=document.createElement('canvas');
var backcontext=back.getContext('2d');
var-cw,ch;
console.log({v});
v、 addEventListener('play',function(){
cw=v.客户端宽度;
ch=v.clientHeight;
canvas.width=cw;
canvas.height=ch;
背面宽度=cw;
back.height=ch;
绘制(v,上下文,背景,cw,ch);
},假);
},假);
功能图(v、c、bc、w、h){
如果(暂停| |结束)返回false;
//首先,将其绘制到背景画布中
绘制图像(v,0,0,w,h);
//从背景画布抓取像素数据
var idata=bc.getImageData(0,0,w,h);
var数据=idata.data;
idata.data=数据;
//在可见画布上绘制像素
c、 putImageData(idata,0,0);
//重新开始!
设置超时(绘图,20,v,c,bc,w,h);
}
#c{
位置:绝对位置;
最高:50%;
左:50%;
利润率:-180px 0 20px;
}
若要查看此视频,请启用JavaScript,并考虑升级到
网络浏览器
支持HTML5视频
您可以使用服务器作为代理,通过自己的域传输视频,这样您就不会遇到CORS问题。我不希望使用代理。因为我连接到cdn,它有点忽略了这一点..我的服务器在中国,cdn在美国。。例如……那么,你真的无能为力了。当相应的CORS标头不存在时,您无法从受污染的画布访问数据—由CDN服务器设置正确的CORS头以避免引发异常。