JavaScript 下载图片

在 Web 开发中，经常需要将图片下载到本地。JavaScript 为我们提供了下载图片的方法。本文将介绍一些下载图片的基本方法和注意事项。

简单下载图片

function downloadImage(imageUrl) {
  let a = document.createElement("a");
  a.href = imageUrl;
  a.download = "image.png";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

此代码片段创建了一个链接标签，将图像链接作为其 href 属性添加。 download 属性告诉浏览器下载而不是导航到链接的目标。

带有回调的下载图片

有时需要下载一个图片，然后随后应用到你的应用程序。为了解决这样的场景，我们可以将回调函数作为参数传递给下载函数。

function downloadImage(imageUrl, callback) {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', imageUrl, true);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    if (xhr.status === 200) {
      let blob = xhr.response;
      let img = document.createElement('img');
      img.src = URL.createObjectURL(blob);
      callback(img);
    }
  };
  xhr.send();
}

此代码片段使用了 XMLHttpRequest 对象从服务器获取一个二进制的图片数据，然后将其用作图片源。回调函数将完成将图片应用到应用程序。

异步下载图片

JavaScript 是一门异步脚本语言， 我们应当使用异步函数来对下载图片的请求进行封装。

这里使用了 Promises（或者 async/await）来实现异步操作。我们首先发出一个 XHR 请求，然后使用 Blob 数据类型创建一个 URL，该 URL 指向图像。最后，我们用 Image 对象将该 URL 分配给新创建的图像。

async function downloadImageAsync(imageUrl) {
  let response = await fetch(imageUrl);
  let blob = await response.blob();
  let img = document.createElement('img');
  img.src = URL.createObjectURL(blob);

  return new Promise(resolve => {
    img.onload = () => {
      resolve(img);
    };
  });
}

注意

在下载图片时，请注意以下事项：

• 需要 CORS 支持。
• 如果需要多次使用相同的数据 URI，则不应在每次使用时重新创建 URL。
• 如果负载很大，则应分段下载并将数据分块传输。

总的来说，JavaScript 提供了多种用于下载图片的方法，我们可以根据需要选择最适合的方法。在选择时，请记住除了选择一种简单易用的方法外，也要注意诸如代码的可维护性、可读性、可扩展性等事项。