[英]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.