Могу ли я получить доступ к файлу данных тега img из JavaScript

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 для альфа) * ​​1009 *

Answer 3

Вы можете нарисовать изображение тега img на холсте HTML, используя canvas.drawImage

Answer 4

Некоторые браузеры поддерживают строку в кодировке Base64 как img src , но не все. Это будет выглядеть так:

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

Когда вы делаете это таким образом, вы можете в аренду подделывать доступ к фактическим данным, но, как я сказал, они не поддерживаются на 100%. Кроме этого - ни за что.

Реальный вопрос: чего вы пытаетесь достичь? Большую часть времени (95%, возможно, больше) повторных загрузок изображений фиксируется в кэше браузера, и в этом случае просто изменение img.src имеет тот же эффект и не вызывает сетевой трафик (если это то, что вас беспокоит).

Answer 5

Вы можете попробовать загрузить изображение с помощью AJAX, но тогда вы можете столкнуться с междоменными ограничениями скриптов.

О других способах доступа к данным изображения я не знаю.

Answer 6

Попробуйте это:

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