ImageData的外部加載的圖像？

Question

我加載外部圖像並繪製在畫布元素上像這樣：

var canvas = document.getElementById('canvas1'); 
var context = canvas.getContext('2d'); 
var image = new Image(); 
image.onload = function(evt) { context.drawImage(evt.target, 0, 0); } 
image.src = "test.jpg"; 

但我希望得到的ImageData。因此調用context.drawImage後，我這樣做：

var imagedata = canvas.getImageData(); 
manipulate(imagedata); // modifies imagedata.data 
context.putImageData(imagedata, 0, 0); 

這是唯一的方式來獲得外部加載圖像的imageData？ 在畫布上繪製圖像&然後獲取圖像數據看起來非常慢。 我錯過了什麼嗎？

謝謝！

Answer 1

沒有獲取ImageData的直接方式，效率不高，但另一方面，您可能不需要重複將圖像繪製到畫布上 - 如果您需要原始數據多次，則可能只是想要畫一次屏幕畫布並保持周圍的畫布。

唉，與畫布的另一個問題是，出於安全原因，如果您從不同來源繪製圖像（或其他資源），則無法從畫布讀取ImageData。

Answer 2

您可以嘗試執行二進制Ajax，然後手動解碼圖像數據，但使用畫布會更容易。