This is my code:
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)
i can successfully download the image but when I open the image it's shows Sorry, Photos can't open this file because the format is currently unsupported, or the file is corrupted
When I use unsplash image url in that time it's work well. Can anyone tell me please why it's happening and how can I fix this issue.
Do like this because you're not defining MIME type while downloading the file.
return fetch(urlEndpoint, options)
.then((res) => res.blob())
.then((blob) => URL.createObjectURL(blob))
.then((href) => {
Object.assign(document.createElement('a'), {
href,
download: 'filename.png',
}).click();
});
or else you can do like this
download(filename,url) {
fetch(url, {
mode: 'no-cors',
})
.then(response => response.blob())
.then(blob => URL.createObjectURL(blob))
.then(uril => {
var link = document.createElement("a");
link.href = uril;
link.download = filename + ".png";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
}
The issue here is the Response object , fetch is being called with mode:'no-cors', resulting in the response object to have type as "opaque" and hence using response.blob() will result into a Blob size of 0 and Blob type of "" (read more below in Response.blob()).
The mime-type is set as expected and your code works as expected but since you are making a cross origin request you are getting Response.blob() as empty and the file you subsequently save(download through anchor tag) has no data.
Read more about Response.blob()
to validate the above try and console.log the blob like so :
function downloadImage(url) {
fetch(url, {
mode: 'no-cors',
})
.then(response => response.blob())
.then(blob => {
console.log(blob); //log the blob and check its size;
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();
})
}