采用canvas单张下载图片

最新推荐文章于 2024-05-03 11:08:18 发布

小兔子的博客

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量121

点赞数

分类专栏： vue 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_52484354/article/details/126528098

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

// 单张下载图片
function downloadByBlob (url:string, name?:string) {
  const image = new Image()
  image.setAttribute('crossOrigin', 'anonymous') // 解决 canvas 跨域问题
  image.src = url + `?timestamp= ${Date.now()}`
  image.onload = () => {
    const canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    const ctx:any = canvas.getContext('2d')
    ctx.drawImage(image, 0, 0, image.width, image.height)
    canvas.toBlob((blob) => {
      const url = URL.createObjectURL(blob)
      download(url, name)
      // 用完释放URL对象
      URL.revokeObjectURL(url)
    })
  }
}
function download (href:string, name?:string) {
  const eleLink = document.createElement('a')
  eleLink.download = name || '鱼类'
  eleLink.href = href
  eleLink.click()
  eleLink.remove()
}