Скачивание массива изображений
 

Подскажите кто знает, можно ли при помощи js реализовать скачивание сразу нескольких изображений?

У меня есть массив урлов изображений:

let imgs = ['https://javascript.ru/forum/images/ca_serenity/misc/logo.gif', 'https://javascript.ru/forum/image.php?u=60342&dateline=1502033143'];

Есть кнопка:

<button id="download">Скачать изображения</button>

Можно ли одним нажатием кнопки выполнить скачивание сразу всех изображений из массива урлов?

Если для реализации изображения должны быть как DOM-элементы, то для своей задачи я могу получить их как DOM через document.querySelectorAll('img.test').

Есть ещё хотелка чтобы при этом не появлялось окно с подтверждением для скачивания и была возможность задать папку на компе куда именно скачивать эти картинки (диск G/papka).


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

MC-XOBAHCK,
Была тут где-то темка, сейчас гляну

Я прежде чем тему создать пробовал искать так же и поиском на сайте, но я не дружу с здешним поиском - сколько не пробовал искать, у меня совсем не то выдаёт в результатах.

Можно скачать как архив и распаковать куда нужно! 📦

<button id="download" disabled>Создание архива...</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script>
	
(async () => {
	const imgs = [
		'https://javascript.ru/forum/images/ca_serenity/misc/logo.gif',
		'https://javascript.ru/forum/image.php?u=60342&dateline=1502033143'
	];

	const zip = new JSZip();

	const extensions = {
		"image/jpeg": ".jpg",
		"image/gif": ".gif",
		"image/svg+xml": ".svg",
		"image/png": ".png",
	};

	var counter = 1;

	for(const src of imgs) {
		const response = await fetch(`https://cors-anywhere.herokuapp.com/${src}`);
		const blob = await response.blob();

		zip.file(
			`file-${counter++}${extensions[blob.type]}`,
			blob,
			{ binary: true }
		);
	}

	zip.generateAsync({ type: "blob" }).then(function(content) {
		const button = document.getElementById("download");
		const link = document.createElement("a");
		
		link.download = "images.zip";
		link.href = URL.createObjectURL(content);
		button.textContent = "Скачать изображения";
		button.disabled = false;
		
		button.addEventListener("click", event => {
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		});
	});
})();

</script>

гугл поиск больше находит на этом сайте чем локальный site:javascript.ru запрос

function save(arr){
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function () {
      var a = document.createElement('a');
      a.href = window.URL.createObjectURL(xhr.response);
      a.download = arr[0].split('/').pop()||arr[0];
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      a.remove();
      arr.shift();
      if(arr.length) save(arr);
    };
    xhr.open('GET', 'https://cors-anywhere.herokuapp.com/'+arr[0]);
    xhr.send();
  }

let imgs = ['https://javascript.ru/forum/images/ca_serenity/misc/logo.gif', 'https://javascript.ru/forum/image.php?u=60342&dateline=1502033143'];

save(imgs.slice());

Malleys, конкретно под то что мне сейчас нужно zip только усложняет, вынуждая потом ещё на лишние телодвижения. Но я уже давно хотел спросить да всё стеснялся про zip и возможность браузерами генерировать файлы.
Большое спасибо! Пример буду разбирать, у меня этот вопрос в другой задаче давно уже не решённый стоит.

Я не спорю, но дело в том что гугл находит темы из 2007-2011гг, а там в основном хаки как к эксплореру прикрутить и тому подобное для совместимости.

Спасибо за решение - то что нужно.

Извините за беспокойство, а можно уточнить один момент по поводу строчки

xhr.open('GET', 'https://cors-anywhere.herokuapp.com/'+arr[0]);

У меня нет задачи парсить картинки с чужих сайтов. Мне нужно скачать картинки с просматриваемой страницы в браузере. Это как в контекстном меню браузера (если вызвать его на изображении) пункт "Сохранить картинку как...". Только у меня уже есть массив нужных мне изображений которые нужно скачать.

Для решения такой задачи обязательно нужно делать запрос

xhr.open('GET', 'https://cors-anywhere.herokuapp.com/'+arr[0]);

Прочитал что у этого сервера есть ограничения и его могут ложить.


P.S. Я на сайте когда ещё не знал HTML и правила оптимизации наделал кучу однотипных косяков. Теперь написал скрипт который находит эти ошибки при просмотре страниц. Просто скачивать по одной картинке через контекстное меню долго, нудно и можно пропустить.

тогда удалите https://cors-anywhere.herokuapp.com/, это не обязательно

при таком подходе и XMLHttpRequest не нужен.
просто подставляем адрес картинки как есть в href ссылки с download, и программно кликаем. Для множества картинок можно в цикле, или по таймеру.

Alexandroppolus,
при таком подходе откроется в окне браузера.