从画布读取时出现 IE9 安全错误（非跨域）

Posted 2023-02-19

【中文标题】从画布读取时出现 IE9 安全错误（非跨域）

【英文标题】：IE9 security error when reading from canvas (non cross-domain)

【发布时间】：2012-07-28 01:19:06

【问题描述】：

我正在播放带有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
);

这里发生了什么，可以做些什么来解决它？

【参考方案1】：

嗯..这似乎很奇怪！ 您是否尝试过使用 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);