关于javascript:前端下载图片

5次阅读

共计 848 个字符，预计需要花费 3 分钟才能阅读完成。

通常咱们下载文件能够应用 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
}

正文完