vue实现图片下载至本地

js

 handleDownload(img) {
      let url=img
      let imgName=(img.split('/'))[img.split('/').length-1]//下载图片时的名称 没有名称时可直接获取时间戳 用时间戳命名
        let image = new Image()
        image.setAttribute('crossOrigin', 'anonymous')//设置图像的跨域属性 
        image.src = url
        image.onload = () => {
          let canvas = document.createElement('canvas')//创建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, imgName)
            // 用完释放URL对象
            URL.revokeObjectURL(url)
          })
        }
    },

//下载图片 创建a标签的方法
 download(href, name) {
        let eleLink = document.createElement('a')
        eleLink.download = name
        eleLink.href = href
        eleLink.click()
        eleLink.remove()
      },