我们在浏览器使用JavaScript下载图片的时候；通常会想到使用window.location.href=imgUrl或者window.open(imgUrl);但是有时候我们会发现图片会在浏览器打开；而达不到我们想要的下载效果；于是通过调研；下面总结了两种图片下载的方法

前置代码

下载图片前首先在JavaScript通过new Image()的方式加载图片；然后再对图片做转换，转换包括图片转base64，base64转blob等；然后对转换之后的图片资源进行下载。下面直接上代码。

// 加载图片
async function loadImage (params) {
  // 图片src 必传
  let src = params.src
  return new Promise((resolve, reject) => {
    let img = new Image()
    img.src = src
    img.crossOrigin = 'anonymous'
    img.onload = () => {
      resolve(img)
    }
    img.onerror = reject
  })
}

// 图片转base64
function img2Base64 (image) {
  // 图片画到canvas
  const canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  const context = canvas.getContext('2d');
  context.drawImage(image, 0, 0);
  return canvas.toDataURL('image/png', 1.0)
}
// base64转blob
function base64ToBlob (base64Code) {
  let parts = base64Code.split(';base64,')
  let contentType = parts[0].split(':')[1]
  let raw = window.atob(parts[1])
  let rawLength = raw.length
  let uInt8Array = new Uint8Array(rawLength)
  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i)
  }
  return new Blob([uInt8Array], {
    type: contentType
  })
}

// 下载资源
function downloadFile(href, filename) {
  const link = document.createElement('a');
  link.href = href;
  link.download = filename;
  link.setAttribute('type', 'application/octet-stream');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

下载图片代码

方法一；先加载图片，再把图片转base64，再下载base64。

方法二；先加载图片，再把图片转base64，再把base64转blob，再下载blob。

// 1；先加载图片，再把图片转base64，再下载base64
async function downloadImg1(imageUrl) {
  const image = await loadImage({src: imageUrl})
  let base64 = img2Base64(image)
  // 下载图片
  downloadFile(base64, 'file.png');
}
// 2；先加载图片，再把图片转base64，再把base64转blob，再下载blob
async function downloadImg2(imageUrl) {
  const image = await loadImage({src: imageUrl})
  let base64 = img2Base64(image)
  let blob = base64ToBlob(base64)
  // 下载图片
  downloadFile(URL.createObjectURL(blob), 'file.png');
}

// 示例
downloadImg1('https://xyhnnx.gitee.io/img/getdoc.png');
downloadImg2('https://xyhnnx.gitee.io/img/getdoc.png');

可能遇到的报错

如果遇到这个错误：Access to image at 'xx' from origin 'xx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.这个错误提示通常是由于遵循同源策略而引起的，它防止JavaScript代码从不同的源（域名、协议或端口）获取数据。如果试图从另一个域名下加载图像，即在跨域请求图片时，由于CORS限制，浏览器可能会拒绝显示该图像并抛出这个错误。

要解决这个问题，您可以使用下面的任一方法：

1. 将图像文件存放在与您的网站相同的主机上，或者使用基于相对路径的URL。这将避免跨域问题。

2. 如果必须从不同的域名或主机加载图像，您需要在相关的服务器上设置Access-Control-Allow-Origin标头，在响应中包含允许访问资源的域名。例如，在HTTP响应中添加以下标头可以允许所有域名访问图片：Access-Control-Allow-Origin: *

如果您无法在服务器上进行更改，可以尝试使用代理来获取图像数据。例如，您可以在您的服务器上设置代理，在代理中请求图像，而不是直接从浏览器中请求。这将避免跨域问题。

总之，CORS问题通常涉及到服务器、响应头或代理，您可以根据实际情况选择相应的解决方案来解决这个问题。