Javascript 直接下载img标签

我有一个跨原点的图像标签，它的

src

是动态分配的

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

显然，这会在文档中显示出来，但我希望用户能够在单击下载按钮后将其保存到本地文件系统。我动态创建一个

a

标记，将下载属性设置为播放器用户名（以及文件类型，png），但我不确定将

href

属性设置为什么。显然，我可以将其设置为实际图像标记的URL，但不幸的是，这给下载的文件提供了一个非常难看且很长的名称，这有损于用户体验。由于图像是跨原点的（我无法更改），所以我不能将其放到画布上并将其转换为原始数据。但是，尽管如此，我确信有某种方法可以让用户从image元素下载，但我找不到这种方法。（好像他们右键单击并点击“将图像另存为…”）

我已尝试将

a

对象的

href

属性直接设置为img标记，但由于“无文件”，下载失败

我尝试将

href

属性设置为新创建的

图像

对象，但出现了相同的错误

注意：服务器端无法执行任何操作。

---

出于测试目的，用户名“ImAlgo”可以在下载链接中使用，下载属性用于下载文件的用户看到的文件名，href用于指向图像的链接，例如：

<a href="/images/coolimage3424623.png" download="skin.png">

您可以使用

fetch（）

，

YQL

来获取资源的

数据URI

表示，

元素和

下载

属性来设置每个chromium和firefox上提供给用户下载的资源的建议文件名

let username=“ImAlgo”；
让url=`http://skins.minecraft.net/MinecraftSkins/${username}.png`；
让查询=`https://query.yahooapis.com/v1/public/yql?q=select *from data.uri，其中url=“${url}”&format=json&callback=`；
设a=document.createElement（“a”）；
a、 下载=`${username}.png`；
fetch（query）.then（response=>response.json（））
.then（{query:{results:{url}}}）=>{
a、 href=url；
文件.正文.附件（a）；
a、 单击（）；
})
.catch（err=>console.log（err））

您说您不知道应该将href设置为什么。它应该是

”http://skins.minecraft.net/MinecraftSkins/“+username+”.png“

然后下载：

username+”.png“

请阅读我的整个问题，如果您不理解，请不要回答。我的问题是不理解下载是如何工作的。我的问题主要是跨源障碍。@JaromandaX注意到这一点意味着我的服务器端无法执行任何操作。重读问题有帮助（今天早上只喝了一杯咖啡）-我将删除我的评论-但是，一个示例用户名将有助于测试我添加了一个测试username@JaromandaX这个问题是跨来源的。同样，图像在文档中显示良好。我看到了。我正试图通过JS将其自动下载到用户的计算机上，但由于该图像不在我的服务器上，它对我非常生气。@在

保存文件
对话框中使用
元素建议的文件名时，算法是唯一的问题？用户可以在下载文件之前或之后随时更改建议的文件名。