Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.02.2019, 14:54
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 413

Скачивание массива изображений
Подскажите кто знает, можно ли при помощи 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).


Если решение геморойное, подскажите хотя бы в какую сторону рыть и смотреть.
Ответить с цитированием
  #2 (permalink)  
Старый 12.02.2019, 15:39
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,649

MC-XOBAHCK,
Была тут где-то темка, сейчас гляну
Ответить с цитированием
  #3 (permalink)  
Старый 12.02.2019, 15:57
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 413

Сообщение от j0hnik Посмотреть сообщение
MC-XOBAHCK, Была тут где-то темка, сейчас гляну
Я прежде чем тему создать пробовал искать так же и поиском на сайте, но я не дружу с здешним поиском - сколько не пробовал искать, у меня совсем не то выдаёт в результатах.
Ответить с цитированием
  #4 (permalink)  
Старый 12.02.2019, 16:46
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,180

Можно скачать как архив и распаковать куда нужно! 📦
<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>

Последний раз редактировалось Malleys, 12.02.2019 в 17:16.
Ответить с цитированием
  #5 (permalink)  
Старый 12.02.2019, 18:52
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,649

Сообщение от MC-XOBAHCK Посмотреть сообщение
Я прежде чем тему создать пробовал искать так же и поиском на сайте, но я не дружу с здешним поиском - сколько не пробовал искать, у меня совсем не то выдаёт в результатах.
гугл поиск больше находит на этом сайте чем локальный 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());
Ответить с цитированием
  #6 (permalink)  
Старый 12.02.2019, 19:17
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 413

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

Сообщение от j0hnik
гугл поиск больше находит на этом сайте чем локальный site:javascript.ru запрос
Я не спорю, но дело в том что гугл находит темы из 2007-2011гг, а там в основном хаки как к эксплореру прикрутить и тому подобное для совместимости.

Спасибо за решение - то что нужно.
Ответить с цитированием
  #7 (permalink)  
Старый 13.02.2019, 12:46
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 413

Извините за беспокойство, а можно уточнить один момент по поводу строчки
xhr.open('GET', 'https://cors-anywhere.herokuapp.com/'+arr[0]);


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

Для решения такой задачи обязательно нужно делать запрос
xhr.open('GET', 'https://cors-anywhere.herokuapp.com/'+arr[0]);

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


P.S. Я на сайте когда ещё не знал HTML и правила оптимизации наделал кучу однотипных косяков. Теперь написал скрипт который находит эти ошибки при просмотре страниц. Просто скачивать по одной картинке через контекстное меню долго, нудно и можно пропустить.
Ответить с цитированием
  #8 (permalink)  
Старый 13.02.2019, 13:01
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,649

тогда удалите https://cors-anywhere.herokuapp.com/, это не обязательно
Ответить с цитированием
  #9 (permalink)  
Старый 13.02.2019, 15:48
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 708

Сообщение от j0hnik Посмотреть сообщение
гугл поиск больше находит на этом сайте чем локальный 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());
при таком подходе и XMLHttpRequest не нужен.
просто подставляем адрес картинки как есть в href ссылки с download, и программно кликаем. Для множества картинок можно в цикле, или по таймеру.
Ответить с цитированием
  #10 (permalink)  
Старый 13.02.2019, 15:58
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,649

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Соединение массива Artur_Hopf Общие вопросы Javascript 4 07.06.2018 16:48
DLE загрузка изображений через дополнительное поле armn555 Элементы интерфейса 0 18.08.2017 11:08
Обход многомерного массива с задержкой после каждого цикла Walk Общие вопросы Javascript 2 14.08.2017 16:17
Ввод диапазона значений массива с клавиатуры Воскобоенко Общие вопросы Javascript 11 06.06.2015 22:34
Проблема с выводом изображений из массива bakmaks Events/DOM/Window 21 18.03.2013 13:42