直接下载img标签 [英] Directly download img tag

问题描述

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

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

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

我已经尝试设置 href a 对象的属性直接添加到img标签，但由于无文件导致下载失败。

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

注意：服务器端不能做任何事。

出于测试目的，用户名ImAlgo可以是使用

解决方案

您可以使用 fetch（） YQL 获取数据URI 资源表示，< a> 元素和下载属性为每个铬和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其中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））;  

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

image.src = "http://skins.minecraft.net/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

解决方案

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.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));

这篇关于直接下载img标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！