javascript html5 drawImage與來自其他域的圖像

Question

所以我有以下代碼：

var element = document.getElementById("myCanvas");
var width = element.width;                                   
var height = element.height;  
var context = element.getContext("2d");                      

/* test 1 */
var img1 = new Image(width, height);
img1.src = "http://www.mydomain.com/image.jpg";

document.body.appendChild(img1);          // <-- A: this works 
context.drawImage(img1,0,0,width,height); // <-- B: this works

/* test 2 */
var img2 = new Image(width, height);
img2.src = "http://www.notmydomain.com/image.jpg";

document.body.appendChild(img2);          // <-- C: this works 
context.drawImage(img2,0,0,width,height); // <-- D: this does not work

好的，看一下我的代碼，在test 1我創建了一個帶有圖片的圖像對象，該圖片與頁面托管在同一域中。 從A:我可以看到它加載得很好（只是A:和C:作為測試拋出，以確保正確加載img對象）。 B:也可以，它將圖像繪制到我的畫布上。

在test 2 ，我加載了一個托管在與我頁面的域不同的域上的圖像。 C:工作正常，我知道您可以加載其他域上托管的圖像。 但是， D:不起作用。 我收到以下錯誤：

Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: ....

根據我的理解，這被認為是跨站點腳本。

所以這是問題：

1）為什么將其視為跨站點腳本？ 我的意思是，我知道為什么 ……但是為什么當C:是D:時不允許？ IMO，它們在原理/精神上是一樣的嗎？

2）除了傳統的跨站點腳本變通方法以外，還有其他方法可以解決此問題嗎？ 我想我將不得不使用AJAX將URL傳遞到服務器端腳本並發出請求，然后將圖像保存在服務器上並返回URL以便它在同一域中，或者否則（我認為）我可以返回原始的base64編碼數據，並使用canvas方法從原始數據構建它。 我可以做任何一件事情，但是...我有點希望也許我缺少一些有關html5 / canvas的東西（我是新手！）

Answer 1

拿着它。 這里還有其他事情。

您可以絕對從其他域繪制圖像。

這是jsfiddle中的代碼，它從placekitten.com繪制圖像：

http://jsfiddle.net/ZZW5V/

您應該嘗試用notyourdomain圖片的網址替換該小提琴代碼中的網址。 它仍然應該工作。

通常，您應該始終能夠從能夠成功獲取圖像的任何位置將圖像繪制到畫布上。

在那之后，您將無法獲得圖像imageData或使用toDataUrl將畫布保存到PNG中。 有重要的安全原因不允許這樣做。

我的猜測是，您正在做某事違反安全規則之一，而不僅僅是嘗試繪制圖像。

Answer 2

這是一種防止信息“被盜”的安全措施。 這是您不能使用AJAX從另一個域獲取頁面的相同原因。

例如，假設一家銀行網站使用圖像來顯示信用信息。 您的代碼可以將該圖像加載到頁面中，然后將其發送到服務器，從而竊取客戶端的安全信息。 這是一個極端的例子，但是一個有效的例子。

您可以將圖像附加到頁面上，因為您無法從中獲取任何信息。 您無法將圖片加載到javascript中，因為這樣您就可以處理和傳輸原始圖片數據了。