javascript下载网络图片

Question

javascript下载网络图片

这个是图片地址，是微信头像

https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqPtHXabe2EUb4UMwc1eCRiadIdGCxVTgibtpAByVHZ3szEprJAQHXjQ09n01IEkq48NFtSlQdU52tQ/132

保存到啊本地C:\code1这个目录下 图片最好是PNG格式 其他格式也可以

Answer 1

AIGC生成：

---

JavaScript 下载网络图片

你想使用 JavaScript 下载网络图片，这个问题非常常见。下面是一个简单的示例代码，使用 XMLHttpRequest 对象来下载网络图片：

function downloadImage(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    if (xhr.status === 200) {
      const blob = xhr.response;
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'image.jpg';
      a.click();
      URL.revokeObjectURL(url);
    }
  };
  xhr.send();
}

// 使用示例
const url = 'https://example.com/wechat-avatar.jpg';
downloadImage(url);

这个代码中，我们首先创建了一个 XMLHttpRequest 对象，然后设置了请求的 URL、方法和是否异步执行。接着，我们设置了响应类型为 blob，这样我们可以获取到图片的二进制数据。

在 onload 事件中，我们检查了响应状态是否为 200，如果是，我们就可以获取到图片的二进制数据，并将其转换为一个 URL 对象。然后，我们创建了一个 <a> 标签，并将其 href 属性设置为 URL 对象的值，download 属性设置为图片的文件名。最后，我们模拟点击了 <a> 标签，以下载图片。

请注意，这个代码需要在浏览器中执行，不能在 Node.js 中执行。

如果你想使用 Promise 来处理图片下载，可以使用以下代码：

function downloadImage(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = function() {
      reject(xhr.statusText);
    };
    xhr.send();
  });
}

// 使用示例
downloadImage('https://example.com/wechat-avatar.jpg')
  .then((blob) => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'image.jpg';
    a.click();
    URL.revokeObjectURL(url);
  })
  .catch((error) => {
    console.error(error);
  });

这个代码中，我们使用了 Promise 来处理图片下载。我们创建了一个 Promise 对象，然后在 onload 事件中 resolve 了图片的二进制数据。如果出现错误，我们就 reject 了 Promise 对象。

使用这个代码，你可以在 Promise 中处理图片下载的结果。