直接下载img标签答案

【问题标题】：Directly download img tag直接下载img标签
【发布时间】：2017-05-24 23:30:59
【问题描述】：

我有一个跨域的图像标签，它的src 是动态分配的。

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

显然这在文档中显示得很好，但我希望用户能够在单击下载按钮时将其保存到他们的本地文件系统中。我动态创建了一个a 标签，将下载属性设置为播放器用户名（和文件类型，png），但我不确定将href 属性设置为什么。显然，我可以将它设置为实际图像标签的 URL，但不幸的是，这给下载的文件带来了一个非常难看且长的名称，这有损于用户体验。由于图像是跨域的（我无法更改），我不能将它放到画布上并将其转换为原始数据。但是，我仍然确信有某种方法可以让用户从图像元素中下载，但我找不到那种方法。（好像他们右键单击并点击“将图像另存为...”）

我曾尝试将a对象的href属性直接设置为img标签，但由于“无文件”导致下载失败。

我尝试将href 属性设置为新创建的Image 对象，但同样的错误。

注意：服务器端无法进行任何操作。
出于测试目的，可以使用用户名“ImAlgo”

【问题讨论】：

@JaromandaX 该注释意味着我的服务器端无能为力。
重新阅读问题有帮助（今天早上只喝了一杯咖啡）-我将删除我的 cmets-但是，一个示例用户名将有助于测试
我添加了一个测试用户名
@JaromandaX 这个问题是跨域的。同样，图像在文档中看起来很好。我看到了。我正在尝试通过JS自动将其下载到用户的计算机上，但是由于该图像不在我的服务器上，因此很生我的气。
@AlgoRythm 使用<a> 元素的唯一问题是Save File 对话框中建议的文件名吗？用户可以在下载文件之前或之后随时更改建议的文件名。

标签： javascript html image

【解决方案1】：

您可以使用fetch()、YQL 来获取资源的data URI 表示、<a> 元素和download 属性来设置在每个 chromium 和 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));

【讨论】：