Este es mi código:
function downloadImage(url) { fetch(url, { mode: 'no-cors', }) .then(response => response.blob()) .then(blob => { let blobUrl = window.URL.createObjectURL(blob); let a = document.createElement('a'); a.download = url.replace(/^.*[\\\/]/, ''); a.href = blobUrl; document.body.appendChild(a); a.click(); a.remove(); }) } var url = 'https://c4.wallpaperflare.com/wallpaper/203/636/834/minimalism-landscape-digital- windows-11-hd-wallpaper-preview.jpg'; downloadImage(url)Cuando ejecuto este código, descarga la imagen con éxito, pero cuando abro la imagen, muestra Lo siento, las fotos no pueden abrir este archivo porque el formato no es compatible actualmente o el archivo está dañado. ¿Alguien puede decirme por qué está sucediendo y cómo puede? Soluciono este problema.
La URL de la imagen que está utilizando está bloqueando su solicitud, por lo tanto, está obteniendo un blob vacío.
He probado tu código con la imagen unsplash, está funcionando.
async function downloadImage(url) { try { const res = await fetch(url); const blob = await res.blob(); const blobUrl = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.download = url.replace(/^.*[\\\/]/, ""); a.href = blobUrl; document.body.appendChild(a); a.click(); a.remove(); } catch (error) { console.log(error); } } const url = "https://images.unsplash.com/photo-1644982647844-5ee1bdc5b114?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"; downloadImage(url);