直接下载img标签

Question

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

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

显然，这显示了在文档不错，但我希望用户能够在下载点击按钮将其保存到本地文件系统。我动态地创建了一个a标记，将下载属性设置为播放器用户名（和文件类型，png），但我不确定要将href属性设置为。很显然，我可以将它设置为实际图片标签的网址，但不幸的是，这会给下载的文件带来一个非常丑陋且很长的名称，这会降低用户体验。由于图像是交叉起源的（我不能改变它），我不能将它放到画布上并将其转换为原始数据。但是，我确信有一些方法可以让用户从图像元素下载，但我找不到这种方式。 （因为如果他们单击鼠标右键，点击“保存图像为...”）

我曾尝试直接设置a对象的href属性的img标签，但下载失败，因为“没有文件”。

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

注意：服务器端不能做任何事情。
出于测试目的，用户名“ImAlgo”可用于

Answer 1

您可以使用fetch()，YQL得到data URI表示资源，<a>元素和download属性在每个铬下载提供给用户的资源上设置建议的文件名和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));

Answer 2

在一个下载链接，下载属性是文件名谁下载文件看到，在href是链接到图像用户例：

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