IE与Chrome的跨域镜像行为

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

我的HTML和SVG图像（位图对象源）位于同一个本地服务器（IISExpress）上。为什么我会出现跨域错误？为什么这两个浏览器在处理跨域图像时表现不一样？如何修复此问题，以便Internet Explore允许我单击图像（我不想对禁用安全选项感兴趣）。

谢谢！

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>

Easeljs位图类文档：

带有SVG源的位图会污染具有交叉原点的画布数据，从而阻止交互。这种情况在所有浏览器中都会发生除了最近的Firefox版本。

Github上也有一个问题，已经关闭：

不幸的是，SVG总是在其他浏览器中引发跨源错误而不是Firefox。这是画布实现中的一个错误。EaselJS需要像素访问才能进行鼠标交互，这就是为什么发生。

相关内容

最新更新

热门标签：