Directly download img tag

Question

I have an image tag which is cross-origin, and it\'s src is assigned dynamically.

image.src = \"http://skins.minecraft.net/MinecraftSkins/\" + usern         


        

Answer 1

You can use fetch(), YQL to get data URI representation of resource, element and download attribute to set suggested file name for resource offered for download to user at each chromium and firefox.

let username = "ImAlgo";

let url = `http://skins.minecraft.net/MinecraftSkins/${username}.png`;

let query = `https://query.yahooapis.com/v1/public/yql?q=select * from data.uri where url="${url}"&format=json&callback=`;

let a = document.createElement("a");

a.download = `${username}.png`;

fetch(query).then(response => response.json())
.then(({query:{results:{url}}}) => {
  a.href = url;
  document.body.appendChild(a);
  a.click();
})
.catch(err => console.log(err));