首页 > 其他分享 >vue 根据url下载图片方法

vue 根据url下载图片方法

时间:2022-10-18 16:25:39浏览次数:57  
标签:canvas vue name url image let eleLink 下载

downloadByBlob(url,name) {


    let image = new Image()
    image.setAttribute('crossOrigin', 'anonymous')
    image.src = url
    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)
        download(url,name)
        // 用完释放URL对象
        URL.revokeObjectURL(url)
      })
    }
function download(href, name) {
  let eleLink = document.createElement('a')
  eleLink.download = name
  eleLink.href = href
  eleLink.click()
  eleLink.remove()
}
},

这个方法,可以直接拿去用,直接把你的图片url传给这个方法,就可以实现vue.js来下载图片了。

标签:canvas,vue,name,url,image,let,eleLink,下载
From: https://www.cnblogs.com/onlyzhangmeng/p/16802956.html

相关文章