前端通过url地址下载图片(浏览器)

 

downloadPicture(imgSrc, name) {
      const image = new Image()
      // 解决跨域Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      image.src = imgSrc
      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 = name || 'photo'
          a.href = url
          a.click()
          a.remove()
          // 用完释放URL对象
          URL.revokeObjectURL(url)
        })
      }
    }

原地址:前端通过后端返回的url下载图片方法

posted @ 2022-12-07 15:59  zagwk  阅读(712)  评论(0)    收藏  举报