直接下载img标签

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

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

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

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

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

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

来源

2017-05-24 AlgoRythm

@JaromandaX该说明意味着什么可以在我的服务器端完成。 – AlgoRythm

重读问题有帮助（今天早上只有一杯咖啡） - 我会删除我的评论 - 但是，一个示例用户名将有助于测试 –

我已添加测试用户名 – AlgoRythm

您可以使用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));

来源

2017-05-25 00:19:00 guest271314

这工作很好，非常有创意的答案！ – AlgoRythm

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

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

来源

2017-05-24 23:34:07

我不确定你是否完全阅读我的问题。 – AlgoRythm

你说你不知道你应该设置href。它应该是'“http://skins.minecraft.net/MinecraftSkins/”+用户名+“.png”'然后下载：'username +“.png”' –

请阅读我的整个问题，如果你这样做不理解它，不要回答它。我的问题不了解下载是如何工作的。我的问题主要是跨越障碍。 – AlgoRythm

直接下载img标签

回答

相关问题