IE 与 Chrome 的跨域图像行为？答案

【问题标题】：Cross-domain images behavior of IE vs Chrome?IE 与 Chrome 的跨域图像行为？
【发布时间】：2014-10-27 13:56:22
【问题描述】：

我正在使用 TypeScript、EaselJs/CreateJs 和 IIS Express 编写一个小型示例应用程序。但是，当我尝试将“单击”事件添加到位图对象时，我不断收到以下错误：JavaScript 运行时错误：发生错误。这很可能是由于使用本地或跨域图像读取画布像素数据时的安全限制。”。该错误仅在 Internet Explorer 中发生，而不在 Chrome 中发生。

我的 HTML 和 SVG 图像（位图对象源）位于同一本地服务器 (IISExpress) 上。为什么会出现跨域错误？为什么这两个浏览器对跨域图像的行为方式不同？如何解决此问题，以便 Internet Explorer 允许我单击图像（我不想对禁用安全选项感兴趣）。

谢谢！

index.html

<!DOCTYPE html>

<html lang="en">
<head>
    <script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
</head>
<body>
    <canvas id="gameCanvas" width="1496" height="1024"></canvas>

    <script>
        var stage = new createjs.Stage(document.getElementById('gameCanvas'));

        var svgImage = new createjs.Bitmap("SvgFile.svg");
        svgImage.on("click", sayHi);
        stage.addChild(svgImage);

        createjs.Ticker.setFPS(40);
        createjs.Ticker.on("tick", tick);

        function sayHi() {
            alert("Hello!"); // INTERNET EXPLORER CRASHES. CHROME DISPLAYS "Hello!".
        }

        function tick() {
            stage.update();
        }

    </script>
</body>
</html>

svgfile.svg

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
 width="467" height="462">
  <rect x="80" y="60" width="250" height="250" rx="20"
      style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />

  <rect x="140" y="120" width="250" height="250" rx="40"
      style="fill:#0000ff; stroke:#000000; stroke-width:2px;
      fill-opacity:0.7;" />
</svg>

【问题讨论】：

标签： internet-explorer google-chrome cross-domain easeljs createjs

【解决方案1】：

Easeljs Bitmap Class Documentation:

带有 SVG 源的位图会使用跨域污染画布数据，这会阻止交互性。这发生在所有浏览器中除了最近的 Firefox 版本。

还有一个issue on Github已经关闭：

不幸的是，SVG 总是在其他浏览器中抛出跨域错误比火狐。这是画布实现中的一个错误。画架需要像素访问才能进行鼠标交互，这就是为什么发生。

【讨论】：