Прочитать изображение из тега IMG в мапять?

[iNfantry]

Подскажите плиз, это возможно? Речь не о получении атрибута src, а о получении самого файла изображения. Конешно можно, используя src, сделать аякс-запрос, но это лишнее действие, ведь изображение уже получено самим тегом IMG.

[iNfantry]

Ребят простите за опечатку, ПАМЯТЬ конешно же, а не мапять)

[voraa]

Сам файл - вряд ли.
А раскодированное изображение в бинарном виде (как Blob или ImageData) - можно.

[iNfantry]

Сам файл - вряд ли.
А раскодированное изображение в бинарном виде (как Blob или ImageData) - можно.

Да, есть blob, но как в него загнать картинку из тега? Тоесть сделать блоб налету и вставить его в имг то понятно, а как наоборот, из тега получить блоб)

[voraa]

// img - элемент <IMG>
// form - желаемый формат'image/jpeg' или 'image/png'
// qa - степень сжатия для jpg (от 0 до 1) 
// см [url]https://developer.mozilla.org/ru/docs/Web/API/HTMLCanvasElement/toBlob[/url]

const ImgtoBlob (img, form, qa) =>{	
	const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.height = img.naturalHeight;
    canvas.width = img.naturalWidth;
    ctx.drawImage(img, 0, 0);
    return new Promise ((res, rej) => {
		canvas.toBlob ((blob) => res(blob), form, qa)
    })
 }
 
//Вызов 
 
ImgtoBlob (img, 'image/jpeg', 0.9).then (blob) => {/* тут можно обрабатывать блоб*/})

//или

let blob = await ImgtoBlob (img, 'image/png')
/* тут можно обрабатывать блоб */

Т.е. это заново кодирует изображение в файл и представляет его в виде блоба.

[iNfantry]

Хорошо, спасибо, попробую. Но если у кого еще предложения будут - тоже буду рад.

[voraa]

Если нужны сами данные в виде пикселей в формате RGBA
то

const ImgtoData (img) =>{ 
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.height = img.naturalHeight;
    canvas.width = img.naturalWidth;
    ctx.drawImage(img, 0, 0);
    return ctx.getImageData(0,0,img.naturalWidth, img.naturalWidth)
 }

//Вызов
  
let imd = ImgtoData (img)
// В imd.data будет Uint8ClampedArray - массив байт по 4 байта на пиксель

PS Это скорее всего не будет работать, если ваша страница и рисунок с разных доменов.
CORS, понимаешь ли
https://developer.mozilla.org/en-US/..._enabled_image

[MallSerg]

К картинкам с другого домена применяется "политика одного источника"
Это значит что у таких картинок нельзя получить доступ к содержимому если сервер отдавший картинку явно не дал на это разрешения с помощью заголовка в ответе на HTTP запрос.
Обычно браузер пишет ошибку в консоль если скрипт пытается получить доступ к содержимому изображения с другого домена.

[Alexandroppolus]

Исходный файл из тега img не выловить никак. Если хочется сэкономить место в памяти, чтобы иметь картинку и в виде блоба, и в <img>, то только вариант из поста #4 этого топика, URL.createObjectURL на загруженный аяксом блоб. Но есть у меня подозрение, что если ты аяксом грузить блоб из уже нарисованной на странице картинки, то браузер догадается не запрашивать её повторно и даже не создавать копию в памяти.