從畫布中讀取時發生IE9安全錯誤（非跨域）

我正在播放video標記中的視頻。視頻文件與index.html位於同一個目錄中。然後，我將視頻像素放在canvas上，對它們進行邏輯處理，讀取它們並放在另一個canvas上。所有這些在firefox和chrome中都可以正常工作，但不能在IE9中正常工作。當我試圖從畫布上讀取像素時，IE會給出安全錯誤。如果視頻來自其他某個域，這可以理解，但事實並非如此。更令人好奇的是，當我將相關代碼放在setTimeout中或從控制檯觸發它時發生錯誤，而不是直接在腳本中調用它。下面是相關的javascript：從畫布中讀取時發生IE9安全錯誤（非跨域）

$(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 
});

這裏發生了什麼，以及可以做些什麼來解決它？

來源

2012-07-30 Nadbor

嗯..這似乎很奇怪！你嘗試過使用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);

來源

2012-08-03 00:19:07

從畫布中讀取時發生IE9安全錯誤（非跨域）

回答

相關問題