使用 JavaScript 下载图像📸

假设你想在你的网站或应用中添加一个功能，允许用户点击按钮下载图片。应该很简单吧？我自己也是这么想的，因为我在Discovery构建内部媒体库工具时需要添加这个功能。

我尝试通过将下载属性添加到锚标记并将href属性设置为图像 url（跨源 url）来添加此功能。

<a href='URL_HERE' download>Download image</a>

事实证明，Chrome 开始忽略指向跨源 URL 的下载属性。

为了解决这个问题，我们将利用浏览器内置的fetch方法。您需要向想要触发图片下载的元素添加一个事件监听器，并调用以下函数：

// Using fetch
async function downloadImage(imageSrc) {
  const image = await fetch(imageSrc)
  const imageBlog = await image.blob()
  const imageURL = URL.createObjectURL(imageBlog)

  const link = document.createElement('a')
  link.href = imageURL
  link.download = 'image file name here'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

imageSrc函数参数表示跨源图像 url。

1. 首先，我们使用fetch获取图片的ReadableStream数据
2. 接下来我们调用fetch提供的blob方法来获取原始图像数据
3. 第三，我们使用URL Web API调用createObjectURL静态方法来创建一个表示图像下载 URL 的 URL
4. 最后，创建一个锚点元素，将新的 URL 设置为href属性。您还可以通过设置锚点元素的download属性来设置文件的名称。最后，我们将创建的锚点元素附加到 DOM 中，触发点击下载图片，然后快速从文档中移除锚点。

搞定！现在，您可以通过触发某个功能来下载图像了！

我希望这对您有帮助并且有用！

这篇文章也可以在sapanbodiwala.com/blog找到