Прочитать изображение из тега IMG в мапять?
Подскажите плиз, это возможно? Речь не о получении атрибута src, а о получении самого файла изображения. Конешно можно, используя src, сделать аякс-запрос, но это лишнее действие, ведь изображение уже получено самим тегом IMG.
|
Ребят простите за опечатку, ПАМЯТЬ конешно же, а не мапять)
|
Сам файл - вряд ли.
А раскодированное изображение в бинарном виде (как Blob или ImageData) - можно. |
Цитата:
|
// 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') /* тут можно обрабатывать блоб */ Т.е. это заново кодирует изображение в файл и представляет его в виде блоба. |
Хорошо, спасибо, попробую. Но если у кого еще предложения будут - тоже буду рад.
|
Если нужны сами данные в виде пикселей в формате 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 |
К картинкам с другого домена применяется "политика одного источника"
Это значит что у таких картинок нельзя получить доступ к содержимому если сервер отдавший картинку явно не дал на это разрешения с помощью заголовка в ответе на HTTP запрос. Обычно браузер пишет ошибку в консоль если скрипт пытается получить доступ к содержимому изображения с другого домена. |
Исходный файл из тега img не выловить никак. Если хочется сэкономить место в памяти, чтобы иметь картинку и в виде блоба, и в <img>, то только вариант из поста #4 этого топика, URL.createObjectURL на загруженный аяксом блоб. Но есть у меня подозрение, что если ты аяксом грузить блоб из уже нарисованной на странице картинки, то браузер догадается не запрашивать её повторно и даже не создавать копию в памяти.
|
Часовой пояс GMT +3, время: 02:53. |