Olá pessoal, neste artigo, ensinarei a baixar múltiplas imagens de um site, usando um algoritmo para busca e download das imagens. Utilizarei o navegador Google Chrome neste exercício.
Vamos começar!
Primeiramente, precisamos abrir o console do nosso navegador. Podemos abrí-lo clicando f12 e acessando o console. Vamos utilizar o site https://www.mundojs.com.br/ para realizar o teste de download das imagens.
Com o site acessado e o console aberto, vamos começar criando uma variável chamada images. Esta variável receberá um querySelectorAll de todas as tags “img”.
let images = document.querySelectorAll('img');
Pronto, já temos todas as tags “img” na nossa variável images. Agora, precisamos percorrer esta lista de tags para realizarmos o download. Vamos utilizar o for…of para isso:
Caso você não conheça o laço de repetição for…of, recomendo a leitura deste artigo, com explicação em vídeo sobre o for…of.
for (let i of images){ }
Dentro do nosso laço for…of, precisamos criar um elemento “a”. Esse elemento receberá o atributo src da imagem.
let a = document.createElement('a'); a.href = i.src;
E iremos mostrar o elemento no console.
console.log(i);
Feito isso, criaremos uma pop-up de download. O browser fará o download de cada imagem em cada link do elemento i.
a.download = i.src;
Feito isso, adicionaremos o nosso elemento “a” ao body, utilizando o método appendChild():
document.body.appendChild(a);
E adicionaremos o evento click() ao elemento a, para, então, desanexar o elemento “a” do body, utilizando o método removeChild():
a.click(); document.body.removeChild(a);
E com isso, está pronto o nosso algoritmo para download de múltiplas imagens. O código completo é este:
let images = document.querySelectorAll('img'); for (let i of images){ let a = document.createElement('a'); a.href = i.src; console.log(i); a.download = i.src; document.body.appendChild(a); a.click(); document.body.removeChild(a); }
Abra o site do MundoJS, e insira este código no console. Aceite os múltiplos downloads no navegador e o código irá baixar as fotos disponíveis com a tag “img”.
Gostou deste artigo? Comente abaixo e compartilhe com seus amigos!