Hola a todos, estoy tratando de descargar imágenes que he mostrado en mi aplicación de reacción. La aplicación obtiene imágenes de una API y las muestra en la página web y también almacena el img src en una matriz. Estoy tratando de hacer un botón de descarga que recorra mi matriz src y descargue todas las imágenes que se muestran y necesito orientación. He leído muchas publicaciones anteriores y me di cuenta de que no puedo usar cURL dentro de mi aplicación de reacción y la API de búsqueda no descarga las imágenes. Estoy tratando de ver si hay una manera de hacer esto con Javascript o si hay una alternativa simple con otro lenguaje de programación. ¡Gracias por tu ayuda!
const downloadAll = () => { const imgArr = document.querySelectorAll('img'); for (let i = 0; i < imgArr.length; i++) { let a = imgArr[i].src; } };Usar el atributo de download de un ancla debería funcionar...
EDITAR
la descarga solo funciona para las URL del mismo origen, o los esquemas blob: y data:. árbitro
Como este no es tu caso, tendrás que crear un blob con cada imagen y, afortunadamente, eso es fácil con la API de fetch .
const downloadAll = async () => { // Create and append a link let link = document.createElement("a"); document.documentElement.append(link); const imgArr = document.querySelectorAll("img"); for (let i = 0; i < imgArr.length; i++) { await fetch(imgArr[i].src) .then(res => res.blob()) // Gets the response and returns it as a blob .then(blob => { let objectURL = URL.createObjectURL(blob); // Set the download name and href link.setAttribute("download", `image_${i}.jpg`); link.href = objectURL; // Auto click the link link.click(); }) } };Probado en CodePen .