Fetch | Как сохранить изображение на клиенте? | JavaScript

У нас есть задача. Мы хотим при помощи браузера, языка JavaScript и прикладных интерфейсов программирования (APIs) скачать изображение на HTML-странице какого-нибудь сайта. Как это сделать?

Эту задачу можно разделить на два этапа:

1. Делаем выборку нужного ресурса изображения при помощи fetch()
2. Распознаём содержимое ОТВЕТА сервера и сохраняем его в файл на ПК (в файловую систему клиента)

Видео о сохранении картинки на ПК через JavaScript

Шаг № 1 — Ссылка на изображение

Сперва нам нужно знать путь до изображения. Получить его можно разными способами. Например, из разметки страницы в инструментах разработчика браузера. Или обращением к объекту HTML-элемента при помощи объекта document и метода getElementsByTagName().

Шаг № 2 — Функция для скачивания данных на ПК

После распознания ТЕЛА ОТВЕТА сервера мы можем приступить к скачиванию полученной строки с байтовой последовательностью на ПК. Для этого создаём функцию. Она будет принимать объект-экземпляр класса Blob, который нам будет возвращать метод blob() от fetch().

function saveImg(blob){
   let link = document.createElement("a");
   link.setAttribute("href", URL.createObjectURL(blob));
   link.setAttribute("download", `${Date.now()}`);
   link.click();
}

Эта функция ничего не возвращает. Она создаёт новый объект ссылки link в объекте document, который открыт в текущей вкладке браузера. Для объекта link мы добавляем два атрибута — «href» и «download«.

В качестве пути (значения для атрибута «href«) мы генерируем локальный адрес до ресурса объекта-экземпляра класса Blob, который пришёл из fetch(). В этой генерации нам помогает метод createObjectURL() у объекта URL.

Шаг № 3 — Вызов функции saveImg() внутри fetch()

fetch('ПУТЬ_ДО_РЕСУРСА_ИЗОБРАЖЕНИЯ')
// Выборка возвращает нам объект-экземпляр класса Promise
// Результатом Обещания является объект Response

// Объект Response мы пробрасываем в then() - "следующий". И в нём распознаём тело ОТВЕТА, получая при этом объект-экземпляр класса Blob
.then(response_object=>response_object.blob())

// Объект-экземпляр класса Blob мы пробрасываем в then() - "следующий". И в нём вызываем функцию сохранения изображения на ПК, передавая в функцию наш Blob-объект.
.then(blob_object=>saveImg(blob_object))

Приколы при скачивании изображений

На странице сайта изображения могут быть отрисованы, но ссылки на них могут жить в совершенно других местах.

На некоторых сайтах изображения запихивают в CSS-разметку. Например прячут его в свойство background-image, а потом в HTML-разметке присваивают определённый класс.

Ещё ссылки могут поступать из скриптов, которые должны сначала выполниться браузером («отрисоваться») и только после из выполнения появятся в разметке документа нужные элементы <img> с сылками на изображения.

Почему какие-то изображения не сохранятся или вы не получите нужный ответ?

Основная проблема может заключаться в протоколе CORS, который может блокировать чтение ресурсов из разных источников. Это тема отдельной публикации и вам нужно знать больше IT-шной информации о том как работают протоколы передачи данных, чтобы понять её суть.

Другая причина — это попытка получения непубличного ресурса изображения. Если вы авторизованы на каком-то сервисе, то ваша ВЫБОРКА будет должна отправлять за вас УЧЁТНЫЕ ДАННЫЕ. В этой публикации рассмотрен самый простой пример скачивания изображения на ПК при помощи JavaScript.

Информационные ссылки

Стандарт URL — WHATWG — https://url.spec.whatwg.org

Стандарт DOM — WHATWG — https://dom.spec.whatwg.org

Стандарт File API — w3.org — «Creating and Revoking a blob URL» — https://www.w3.org/TR/FileAPI/#creating-revoking

Стандарт File API — w3.org — createObjectURL(obj) — https://www.w3.org/TR/FileAPI/#dfn-createObjectURL

Перевод стандарта File API — https://efim360.ru/file-api/