我可以從JavaScript訪問img標記的數據文件

Question

我想從JavaScript中作為變量訪問作為img標記中的圖像加載的文件。

我不想訪問它的名字，而是實際的數據。

這樣做的原因是我希望能夠將變量復制到變量和從變量復制，以便我可以在不重新加載圖像的情況下更改圖像。

可以這樣做嗎？ 如果是這樣，怎么樣？

注意：我對閱讀數據比寫它更感興趣。

Answer 1

// Download the image data using AJAX, I'm using jQuery
var imageData = $.ajax({ url: "MyImage.gif", async: false }).responseText;

// Image data updating magic
imageDataChanged = ChangeImage(imageData);

// Encode to base64, maybe try the webtoolkit.base64.js library
imageDataEncoded = Base64Encode(imageDataChanged);

// Write image data out to browser (FF seems to support this)
document.write('<img src="data:image/gif;base64,' + imageDataEncoded + '">');

Answer 2

如果您正在使用Firefox（我認為Opera和Safari;我現在無法檢查），您可以在canvas元素上繪制圖像並使用getImageData。

它會像這樣工作：

var img = document.getElementById("img_id");
var canvas = document.getElementById("canvas_id");
var context = canvas.getContext("2d");

var imageData = context.getImageData(0, 0, context.width, context.height);

// Now imageData is an object with width, height, and data properties.
// imageData.data is an array of pixel values (4 values per pixel in RGBA order)

// Change the top left pixel to red
imageData.data[0] = 255; // red
imageData.data[1] = 0;   // green
imageData.data[2] = 0;   // blue
imageData.data[3] = 255; // alpha

// Update the canvas
context.putPixelData(imageData, 0, 0);

獲得圖像數據后，您可以計算每個像素的起始索引：

var index = (y * imageData.width + x) * 4;

並為每個通道添加偏移量（0表示紅色，1表示綠色，2表示藍色，3表示alpha）

Answer 3

有些瀏覽器支持Base64編碼的字符串作為img src ，但不是全部。 這看起來像：

<img src="data:image/gif;base64,R0lGODl......j5+g4JADs=">

當你這樣做的時候，你可以隨意訪問虛擬訪問實際數據，但正如我所說，它不是100％支持。 除此之外 - 沒辦法。

真正的問題是：你想要實現什么目標？ 大多數時候（95％，可能更多）重復的圖像重新加載被瀏覽器緩存捕獲，在這種情況下，只修改img.src具有相同的效果並且不會導致網絡流量（如果這是你擔心的）。

Answer 4

您可以使用canvas.drawImage將img標記的圖像繪制到HTML畫布上

Answer 5

您可以嘗試使用AJAX下載圖像，但是您可能會遇到跨域腳本限制。

其他訪問圖像數據的方法我不知道。

Answer 6

嘗試這個：

img = new Image(); 
img.src = "imagefile.jpg";