前端下載圖片

通常我們下載文件可以使用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
}