编程知识 cdmana.com

前端下載圖片

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

版权声明
本文为[PatWu16]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/11/20211125171540535l.html

Tags 前端 端下
Scroll to Top