如何下载使用 <img> 标签呈现的图像？答案

【问题标题】：How can I download image which is rendered with <img> tag?如何下载使用 <img> 标签呈现的图像？
【发布时间】：2022-03-04 04:57:06
【问题描述】：

让我解释一下我的用例：

我有一个页面，我通过 url（从远程主机）获取图像并显示它。另外，我在页面上有一个按钮。单击时，应下载图像。我想在不进行任何其他远程调用的情况下下载图像。

所以总的来说，我想通过一次获取图像来支持两件事：

客户应该能够在页面上看到渲染的图像。
客户应该能够通过单击按钮下载图像。

你能帮我解决这个问题吗？

【问题讨论】：

这能回答你的问题吗？ Directly download img tag
实际上并不完全。我看到它将立即开始下载图像。但是显示图像呢？

标签： javascript html image download

【解决方案1】：

你看到 window.location.href 了吗？ https://www.w3schools.com/js/js_window_location.asp

在我的参考项目中，我从后端获取图像，制作 URL.createObjectURL (img) 并将函数分配给一个按钮，该按钮仅在 on: click 上执行 window.href.location = Processedimage。这样，您可以在另一个浏览器窗口中打开原始图像，但同样，我不知道它会有多大用处。然而，这是一个可能的解决方案

【讨论】：

我看不出它在这里有什么帮助。我的观点是只从远程主机获取图像一次，并且支持显示和下载。
在我的参考项目中，我从后端拍摄了一张图片，制作了一个 URL.createObjectURL (img) 并将一个函数分配给一个按钮，该按钮只需执行 window.href.location = Processedimage on on：点击。这样，您可以在另一个浏览器窗口中打开原始图像，但同样，我不知道它会有多大用处。然而，这是一个可能的解决方案
不，我不想转到其他页面。我想在页面上显示图片，点击按钮后，开始从浏览器下载图片。

【解决方案2】：

其实这个是有答案的：

你说你会获取图像：

代码应该看起来像这样，所以很容易扩展。

let imageData
fetch('http://example.com/picture.png')
  .then(response => response.blob())
  .then(data => {
  const urlCreator = window.URL || window.webkitURL;
  imageData = urlCreator.createObjectURL(this.data);
  document.querySelector("#your-image").src = imageData ;
//add this
  document.querySelector("#your-link").href = imageData 
  //here, make sure your link has a download tag in the HTML or in the javascript
//
});

演示：https://streamable.com/ize3yh

【讨论】：