[英]Cross-domain images behavior of IE vs Chrome?
我正在使用TypeScript,EaselJs / CreateJs和IIS Express編寫一個小的示例應用程序。 但是,當我嘗試將“ click”事件添加到Bitmap對象時,始終出現以下錯誤: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>
具有SVG源的位圖將使用跨源數據污染畫布,從而阻止了交互性。 除最近的Firefox版本外,所有瀏覽器都會發生這種情況。
Github上還有一個已關閉的問題:
不幸的是,SVG總是在Firefox以外的瀏覽器中引發跨域錯誤。 這是canvas實現中的錯誤。 EaselJS需要像素訪問才能進行鼠標交互,因此會發生這種情況。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.