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

image.src = "/" + username + ".png";

Obviously this shows up in the document fine but I want the user to be able to save it to their local file system upon the click of a download button. I dynamically create an a tag, set the download attribute to the player username (and filetype, png), but I'm not sure what to set the href attribute to. Obviously, I could set it to the URL of the actual image tag, but unfortunately, this gives the downloaded file a very ugly and long name, which detracts from user experience. Since the image is cross-origin (and I cannot change this), I can't just plop it onto a canvas and convert it to raw data. But, still, I am sure there is some way to just let the user download from the image element, but I cannot find that way. (As if they right-click and hit "Save image as...")

I have tried setting the href attribute of the a object directly to the img tag, but the download fails due to "No file".

I have tried setting the href attribute to a newly-created Image object, but same error.

Note: Nothing can be done server-side.
For testing purposes, the username "ImAlgo" can be used

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

image.src = "http://skins.minecraft/MinecraftSkins/" + username + ".png";

Obviously this shows up in the document fine but I want the user to be able to save it to their local file system upon the click of a download button. I dynamically create an a tag, set the download attribute to the player username (and filetype, png), but I'm not sure what to set the href attribute to. Obviously, I could set it to the URL of the actual image tag, but unfortunately, this gives the downloaded file a very ugly and long name, which detracts from user experience. Since the image is cross-origin (and I cannot change this), I can't just plop it onto a canvas and convert it to raw data. But, still, I am sure there is some way to just let the user download from the image element, but I cannot find that way. (As if they right-click and hit "Save image as...")

I have tried setting the href attribute of the a object directly to the img tag, but the download fails due to "No file".

I have tried setting the href attribute to a newly-created Image object, but same error.

Note: Nothing can be done server-side.
For testing purposes, the username "ImAlgo" can be used

• javascript
• html
• image

• @JaromandaX That note means nothing can be done on my server side. – AlgoRythm Commented May 24, 2017 at 23:46
• re-reading question helped (only had one coffee so far this morning) - I'll remove my ments - but, an example username would help for testing – Jaromanda X Commented May 24, 2017 at 23:49
• I have added a test username – AlgoRythm Commented May 24, 2017 at 23:50
• @JaromandaX The issue is cross-origin. Again, the image is appearing fine in the document. I see it. I'm trying to automatically have it downloaded to a user's puter through JS, but because the image is not on my server, it is being very angry with me. – AlgoRythm Commented May 24, 2017 at 23:59
• @AlgoRythm Is the only issue with using <a> element the suggested file name at Save File dialog? The user can change the suggested file name at any time before or after downloading file. – guest271314 Commented May 24, 2017 at 23:59

1 Answer 1

You can use fetch(), YQL to get data URI representation of resource, <a> 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/MinecraftSkins/${username}.png`;

let query = `https://query.yahooapis./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));