我正在 video
标签中播放视频。视频文件与 index.html 位于同一目录中。然后我将视频像素放在 canvas
上,对它们进行一些逻辑处理,读取它们并放在另一个 canvas
上。所有这些在 firefox 和 chrome 中都可以正常工作,但在 IE9 中却不行。当我尝试从 Canvas 读取像素时,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);
关于javascript - 从 Canvas 读取时出现 IE9 安全错误(非跨域),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11720380/