从存储在 javascript 或最佳替代数组中的图像 url 下载图像

Question

大家好，我正在尝试下载我在 React 应用程序上显示的图像。该应用程序从 API 获取图像并将它们显示在网页上，并将 img src 存储在一个数组中。我正在尝试制作一个下载按钮，它将循环遍历我的 src 数组并下载所有显示的图像并需要一些指导。我已经阅读了很多以前的帖子，并意识到我无法在我的 React 应用程序中使用 cURL，并且 fetch API 不会下载图像。我想看看是否有办法用 Javascript 来做到这一点，或者是否有另一种编程语言的简单替代方法。感谢您的帮助！

const downloadAll = () => {
        const imgArr = document.querySelectorAll('img');
        for (let i = 0; i < imgArr.length; i++) {
            let a = imgArr[i].src;
        }
    };

Answer 1

使用锚点的 download 属性应该可以解决问题...

编辑

download only works for same-origin URLs, or the blob: and data: schemes. ref

由于这不是你的情况，你必须为每个图像创建一个 blob，幸运的是，使用 fetch API.

很容易

const downloadAll = async () => {
  // Create and append a link
  let link = document.createElement("a");
  document.documentElement.append(link);

  const imgArr = document.querySelectorAll("img");
  for (let i = 0; i < imgArr.length; i++) {
    await fetch(imgArr[i].src)
      .then(res => res.blob()) // Gets the response and returns it as a blob
      .then(blob => {

        let objectURL = URL.createObjectURL(blob);

        // Set the download name and href
        link.setAttribute("download", `image_${i}.jpg`);
        link.href = objectURL;

        // Auto click the link
        link.click();
    })
  }
};

测试于 CodePen。

从存储在 javascript 或最佳替代数组中的图像 url 下载图像

Download Images from image url stored in array with javascript or best alternative

html

javascript

api

image

download