从 URL 下载图像 JavaScript

在编写 Web 应用程序时，您可能需要从 URL 下载图像。JavaScript 提供了几种方式来实现这一点，本文将向您介绍其中的几种方法。

使用 XMLHttpRequest

使用 XMLHttpRequest 对象可以轻松地从 URL 上下载图像。以下是一个示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.example.com/image.jpg', true);
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.status === 200) {
    const url = URL.createObjectURL(xhr.response);
    const img = document.createElement('img');
    img.src = url;
    document.body.appendChild(img);
  }
};

xhr.send();

在这个例子中，我们使用 XMLHttpRequest 对象向服务器发送 GET 请求。我们通过设置 responseType 属性来指示我们想要接收一个 Blob （二进制大对象）响应。这个 Blob 响应是图像的二进制数据。

当请求成功时，我们根据响应创建一个 URL 对象，以便我们可以将其传递给 img 元素的 src 属性。最后，我们将 img 元素添加到文档中。

使用 Fetch API

Fetch API 是 JavaScript 的一个新特性，它提供了一种现代的、更简单的方式从 URL 上下载图像：

fetch('https://www.example.com/image.jpg')
  .then(response => response.blob())
  .then(blob => URL.createObjectURL(blob))
  .then(url => {
    const img = document.createElement('img');
    img.src = url;
    document.body.appendChild(img);
  });

在这个例子中，我们使用 fetch() 方法发送一个 GET 请求。我们使用 blob() 方法将响应转换为一个 Blob 属性。然后，我们再次使用 URL.createObjectURL() 将 Blob 转化为图像 URL。

最后，我们创建 img 元素并将其添加到文档中。

使用图像对象

在 JavaScript 中，我们可以使用图像对象来下载图像。以下是一个示例：

const img = new Image();
img.onload = function() {
  document.body.appendChild(img);
};
img.src = 'https://www.example.com/image.jpg';

在这个例子中，我们创建了一个新的图像对象。我们使用 onload 事件处理程序来在图像完成加载后将其添加到文档中。我们通过设置 src 属性来指定图像的 URL。

结论

以上为几种从 URL 下载图像的方法。无论您使用哪个方法，遵循最佳实践，确保代码的安全和高性能！