编程知识 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://segmentfault.com/a/1190000041017974

Scroll to Top