Fatal编程技术网

Internet explorer IE与Chrome的跨域图像行为？

internet-explorer google-chrome

Internet explorer IE与Chrome的跨域图像行为？,internet-explorer,google-chrome,cross-domain,easeljs,createjs,Internet Explorer,Google Chrome,Cross Domain,Easeljs,Createjs,我正在使用TypeScript、EaselJs/CreateJs和iisexpress编写一个小示例应用程序。但是，当我尝试向位图对象添加一个单击事件时，我不断得到以下错误：JavaScript运行时错误：发生了错误。这很可能是由于读取带有本地或跨域图像的画布像素数据时存在安全限制。。该错误仅在Internet Explorer中发生，而不在Chrome中发生 我的HTML和SVG图像位图对象源位于同一台本地服务器IISExpress上。为什么会出现跨域错误？为什么这两个浏览器在跨域图像上的行为

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

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

谢谢

index.html

svgfile.svg

带有SVG源的位图将使画布带有交叉原点 数据，这会阻止交互。这在所有浏览器中都会发生 除了最近的Firefox版本

还有一个已关闭的：

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

<!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>

<?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>