07.10.2020, 20:53
|
Кандидат Javascript-наук
|
|
Регистрация: 29.10.2011
Сообщений: 132
|
|
Прочитать изображение из тега IMG в мапять?
Подскажите плиз, это возможно? Речь не о получении атрибута src, а о получении самого файла изображения. Конешно можно, используя src, сделать аякс-запрос, но это лишнее действие, ведь изображение уже получено самим тегом IMG.
|
|
07.10.2020, 20:57
|
Кандидат Javascript-наук
|
|
Регистрация: 29.10.2011
Сообщений: 132
|
|
Ребят простите за опечатку, ПАМЯТЬ конешно же, а не мапять)
|
|
07.10.2020, 21:14
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
Сам файл - вряд ли.
А раскодированное изображение в бинарном виде (как Blob или ImageData) - можно.
|
|
07.10.2020, 21:19
|
Кандидат Javascript-наук
|
|
Регистрация: 29.10.2011
Сообщений: 132
|
|
Сообщение от voraa
|
Сам файл - вряд ли.
А раскодированное изображение в бинарном виде (как Blob или ImageData) - можно.
|
Да, есть blob, но как в него загнать картинку из тега? Тоесть сделать блоб налету и вставить его в имг то понятно, а как наоборот, из тега получить блоб)
|
|
07.10.2020, 21:26
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
// 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')
/* тут можно обрабатывать блоб */
Т.е. это заново кодирует изображение в файл и представляет его в виде блоба.
Последний раз редактировалось voraa, 07.10.2020 в 21:33.
|
|
07.10.2020, 21:37
|
Кандидат Javascript-наук
|
|
Регистрация: 29.10.2011
Сообщений: 132
|
|
Хорошо, спасибо, попробую. Но если у кого еще предложения будут - тоже буду рад.
|
|
07.10.2020, 21:40
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
Если нужны сами данные в виде пикселей в формате 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
Последний раз редактировалось voraa, 07.10.2020 в 21:46.
|
|
07.10.2020, 21:49
|
|
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,138
|
|
К картинкам с другого домена применяется "политика одного источника"
Это значит что у таких картинок нельзя получить доступ к содержимому если сервер отдавший картинку явно не дал на это разрешения с помощью заголовка в ответе на HTTP запрос.
Обычно браузер пишет ошибку в консоль если скрипт пытается получить доступ к содержимому изображения с другого домена.
|
|
10.10.2020, 13:01
|
|
Профессор
|
|
Регистрация: 25.10.2016
Сообщений: 1,012
|
|
Исходный файл из тега img не выловить никак. Если хочется сэкономить место в памяти, чтобы иметь картинку и в виде блоба, и в <img>, то только вариант из поста #4 этого топика, URL.createObjectURL на загруженный аяксом блоб. Но есть у меня подозрение, что если ты аяксом грузить блоб из уже нарисованной на странице картинки, то браузер догадается не запрашивать её повторно и даже не создавать копию в памяти.
Последний раз редактировалось Alexandroppolus, 10.10.2020 в 13:04.
|
|
|
|