Baixando múltiplas imagens com JavaScript

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!