Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.10.2020, 21:53
Кандидат Javascript-наук
Отправить личное сообщение для iNfantry Посмотреть профиль Найти все сообщения от iNfantry
 
Регистрация: 29.10.2011
Сообщений: 131

Прочитать изображение из тега IMG в мапять?
Подскажите плиз, это возможно? Речь не о получении атрибута src, а о получении самого файла изображения. Конешно можно, используя src, сделать аякс-запрос, но это лишнее действие, ведь изображение уже получено самим тегом IMG.
Ответить с цитированием
  #2 (permalink)  
Старый 07.10.2020, 21:57
Кандидат Javascript-наук
Отправить личное сообщение для iNfantry Посмотреть профиль Найти все сообщения от iNfantry
 
Регистрация: 29.10.2011
Сообщений: 131

Ребят простите за опечатку, ПАМЯТЬ конешно же, а не мапять)
Ответить с цитированием
  #3 (permalink)  
Старый 07.10.2020, 22:14
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 719

Сам файл - вряд ли.
А раскодированное изображение в бинарном виде (как Blob или ImageData) - можно.
Ответить с цитированием
  #4 (permalink)  
Старый 07.10.2020, 22:19
Кандидат Javascript-наук
Отправить личное сообщение для iNfantry Посмотреть профиль Найти все сообщения от iNfantry
 
Регистрация: 29.10.2011
Сообщений: 131

Сообщение от voraa Посмотреть сообщение
Сам файл - вряд ли.
А раскодированное изображение в бинарном виде (как Blob или ImageData) - можно.
Да, есть blob, но как в него загнать картинку из тега? Тоесть сделать блоб налету и вставить его в имг то понятно, а как наоборот, из тега получить блоб)
Ответить с цитированием
  #5 (permalink)  
Старый 07.10.2020, 22:26
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 719

// 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 в 22:33.
Ответить с цитированием
  #6 (permalink)  
Старый 07.10.2020, 22:37
Кандидат Javascript-наук
Отправить личное сообщение для iNfantry Посмотреть профиль Найти все сообщения от iNfantry
 
Регистрация: 29.10.2011
Сообщений: 131

Хорошо, спасибо, попробую. Но если у кого еще предложения будут - тоже буду рад.
Ответить с цитированием
  #7 (permalink)  
Старый 07.10.2020, 22:40
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 719

Если нужны сами данные в виде пикселей в формате 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 в 22:46.
Ответить с цитированием
  #8 (permalink)  
Старый 07.10.2020, 22:49
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 991

К картинкам с другого домена применяется "политика одного источника"
Это значит что у таких картинок нельзя получить доступ к содержимому если сервер отдавший картинку явно не дал на это разрешения с помощью заголовка в ответе на HTTP запрос.
Обычно браузер пишет ошибку в консоль если скрипт пытается получить доступ к содержимому изображения с другого домена.
Ответить с цитированием
  #9 (permalink)  
Старый 10.10.2020, 14:01
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 802

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

Последний раз редактировалось Alexandroppolus, 10.10.2020 в 14:04.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена src тега img atanov Javascript под браузер 14 29.08.2018 15:50
Как избежать ошибки по ограничению открытых файлов? Tipylja Node.JS 3 17.08.2018 20:43
Как сделать для разных атрибутов id тега img? Ola Events/DOM/Window 8 09.04.2017 16:46
Как вставить изображение после тега с определённым классом borus Общие вопросы Javascript 1 20.01.2014 17:43
Изменение параметра "ALT"("TITLE") тега IMG посредством DOM Гость Элементы интерфейса 3 21.02.2008 10:02