IE與Chrome的跨域圖像行爲？

我正在使用TypeScript，EaselJs/CreateJs和IIS Express編寫一個小示例應用程序。但是，當我嘗試向「位圖」對象添加「單擊」事件時，我不斷收到以下錯誤：JavaScript運行時錯誤：發生錯誤。這很可能是由於安全限制使用本地或跨域圖像讀取畫布像素數據。「這個錯誤只發生在Internet Explorer中，而不發生在Chrome上。同一臺本地服務器（IISExpress）爲什麼會出現跨域錯誤？爲什麼這兩個瀏覽器對跨域圖像的行爲不同？我如何解決這個問題，以便Internet Explore允許我單擊圖像（我想在禁用安全選項不感興趣）。IE與Chrome的跨域圖像行爲？

謝謝！

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

來源

2014-09-03 Martin

Easeljs Bitmap Class Documentation:

Bitmaps with an SVG source will taint the canvas with cross-origin data, which prevents interactivity. This happens in all browsers except recent Firefox builds.

還有一個issue on Github已關閉：

Unfortunately SVG always throws cross-origin errors in browsers other than Firefox. This is a bug in the canvas implementation. EaselJS requires pixel access to do mouse interaction, which is why that happens.

來源

2015-07-09 14:09:21 Mimikos

IE與Chrome的跨域圖像行爲？

回答

相關問題