Vue和JS前端网页下载保存图片到本地电脑中

//保存图片
clickSaveImage(url) {
  let image = new Image();
  // 解决跨域 canvas污染问题
  image.setAttribute('crossOrigin', 'anonymous')
  image.src = url + '?time=' + new Date().valueOf() // 加时间戳
  this.$nextTick(() => {
    image.onload = () => {
      const canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      const context = canvas.getContext('2d')
      context.drawImage(image, 0, 0, image.width, image.height)
      canvas.toBlob((blob) => {
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.download = '图片名称'
        a.href = url
        a.click()
        a.remove()
        URL.revokeObjectURL(url)
      })
    }
  })
},

 

posted @ 2023-03-28 13:49  江北小乔  阅读(1075)  评论(0编辑  收藏  举报