HTML:点击下载资源图片

简介

页面点击某个按钮,下载对应图片文件

具体实现

下载后的文件命名,最好加上后缀,如’a.png’。

// downloadByBlob('链接地址', '下载后的文件命名')
downloadByBlob (url, name) {
  let image = new Image() // 创建一个image标签
  image.setAttribute('crossOrigin', 'anonymous') // 设置属性
  image.src = url // 设置src
  // 加载图片,缓存到本地的canvas中(避免图片地址导致的下载跨域)
  image.onload = () => {
    let canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    let ctx = canvas.getContext('2d')
    ctx.drawImage(image, 0, 0, image.width, image.height) // 画布中绘制图片
    canvas.toBlob((blob) => {
      let url = URL.createObjectURL(blob)
      this.download(url, name)
      URL.revokeObjectURL(url) // 用完释放URL对象
    })
  }
},
download (href, name) {
  let eleLink = document.createElement('a') // 创建一个a标签
  eleLink.download = name // 下载命名
  eleLink.href = href // 下载地址
  eleLink.click() // 模拟点击
  eleLink.remove() // 模拟点击移除
}

最后

觉得有用的朋友请用你的金手指点一下赞,或者评论留言一起探讨技术!

匿名

发表评论

匿名网友