[英]IE9 security error when reading from canvas (non cross-domain)
我正在播放video
标签中的video
。 视频文件与index.html位于同一目录中。 然后我将视频像素放在canvas
,对它们做一些逻辑,读取它们并放在另一个canvas
。 这一切在firefox和chrome中运行良好,但在IE9中不行。 当我尝试从画布读取像素时,IE会出现安全性错误。 如果视频源自其他某个域,那么这是可以理解的,但事实并非如此。 更令人好奇的是,当我将相关代码放入setTimeout或从控制台触发它时发生错误,而不是在脚本中直接调用它时。 这是相关的javascript:
$(document).ready(function(){
fun = function(){
var main= $("#main");
var video = $('<video autoplay="autoplay">
<source src="orange.mp4" type="video/mp4" />
<source src="orange.ogv" type="video/ogg" /></video>');
video.css({"width" : 100, "height" : 200});
var canvas1 = $('<canvas></canvas>');
canvas1.css({"position" : "relative", "top" :0,
"width" : 100, "height" : 200, "background-color":"red"});
canvas1.attr({"width" : 100, "height" : 200});
var context1=canvas1[0].getContext("2d");
var canvas2 = $('<canvas></canvas>');
canvas2.css({"position" : "relative", "top" :0,
"width" : 100, "height" : 200, "background-color":"purple",
"margin" : "5px"});
canvas2.attr({"width" : 100, "height" : 200});
var context2=canvas2[0].getContext("2d");
main.append(video);
main.append(canvas1);
main.append(canvas2);
var drawFrame = function(){
context1.drawImage(video[0],0,0,100,200);
var data = context1.getImageData(0,0,100,200);
context2.putImageData(data, 0, 0);
setTimeout(drawFrame, 50);
}
drawFrame();
}
fun(); // <--- this one works
var wurst = setTimeout(fun,50); // <--- this one doesn't
});
这里发生了什么,可以做些什么来解决它?
嗯..这看起来很奇怪! 您是否尝试过使用requestAnimationFrame而不是setTimeout?
// Polyfill for HTML5's requestAnimationFrame API.
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
requestAnimFrame(fun);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.