前端下载图片

通常我们下载文件可以使用a标签的download属性，但此属性仅在同源有效，详情MDN文档，如果非同源下载图片时，浏览器会打开新的tab页展示图片，为了兼容上面两种情况，可以使用JS方法实现：

// 获取图片DataURL
const getImageDataURL = (image) => {
  const canvas = document.createElement('canvas')
  canvas.width = image.width
  canvas.height = image.height
  const ctx = canvas.getContext('2d')
  ctx.drawImage(image, 0, 0, image.width, image.height)
  const extension = image.src.substring(image.src.lastIndexOf('.') + 1).toLocaleLowerCase()
  return canvas.toDataURL('image/' + extension)
}
// 执行下载
// url - 图片地址(必填)
// name - 图片名称（选填，如未传，使用url文件名）
export const downloadImage = (url, name) => {
  if (!url) {
    return
  }
  const a = document.createElement('a');
  const filename = name || url.substring(url.lastIndexOf('/') + 1).toLocaleLowerCase()
  a.setAttribute('download', filename)
  const image = document.createElement('img');
  image.setAttribute('crossOrigin', 'Anonymous')
  image.onload = () => {
    a.href = getImageDataURL(image)
    a.click()
  }
  image.src = url
}