Поведение междоменных изображений IE против Chrome?

Я использую TypeScript, EaselJs/CreateJs и IIS Express для написания небольшого примера приложения. Однако, когда я пытаюсь добавить событие «click» в объект Bitmap, я продолжаю получать следующую ошибку: Ошибка выполнения JavaScript: произошла ошибка. Скорее всего, это связано с ограничениями безопасности при чтении данных пиксельных изображений с локальными или междоменными изображениями ». Эта ошибка происходит только в Internet Explorer, а не в Chrome.Поведение междоменных изображений IE против Chrome?

Мое изображение в формате HTML и SVG (источник объекта Bitmap) один и тот же локальный сервер (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>

источник

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?

ответ

Смежные вопросы