Скачивание изображения из блока с определённым классом

Question

Знатоки, нужен хелп. Суть в том, как реализовать, ссылку на сайте, которая будет скачивать изображение из определённого класса. Допустим есть на сайте и при нажатии, скачивается изображение, которое находится в div с классом .class . Может есть какая нибудь статья на эту тему, буду благодарен, в гугле ничего не нашел((

Answer 1

Я знаток))

Можно воспользоваться fetch(), чтоб отправить запрос и полученный результат записать в Blob, потом с помощью window.URL.createObjectURL() создаешь ссылку на загруженный файл в кеше браузера. Потом с помощью document.createElement('a') создаешь элемент на странице и в атрибут href помещаешь созданный ранее url через createObjectURL(), и потом с помощью click() нажимаешь на него.

Вот я вырезал из своей программки код, должен работать (использовал JQuery):

$('.image_class').unbind().on('click', function(){
        fetch($(this).attr('src')).then(resp => resp.blob()).then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = 'file_name';
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
        });
    });

Если ты делаешь для хрома это, то можно воспользоваться chrome.downloads.download():

  $('.image_class').unbind().on('click', function(){
     chrome.downloads.download({
        url: $(this).attr('src'),
        filename: 'filename',
        saveAs: "если нужно скачивать туда куда выбрал пользователь пишешь true, если в дефолтную папку для загрузок то false"
     });
  });

БЛОГ НА HUSL

Скачивание изображения из блока с определённым классом

Ответы (1 шт):