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

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/