前端图片下载（文件形式）

问题记录
后端返回的是 http://127.0.0.1:7002/public/pic.png 格式图片
但在浏览器通过a标签下载时浏览器会自动打开页面预览
解决办法 转换成base64 后进行下载

  const down2 = () => {
    downloadImage('http://127.0.0.1:7002/public/pic.png','test')
  }


  function getImageBase64(image) {
    const canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    const ctx = canvas.getContext('2d')
    ctx.drawImage(image, 0, 0, image.width, image.height)
    // 获取图片后缀名
    const extension = image.src
      .substring(image.src.lastIndexOf('.') + 1)
      .toLowerCase()
    // 某些图片 url 可能没有后缀名，默认是 png
    return canvas.toDataURL('image/' + extension, 1)
  }



  function downloadImage(url, downloadName) {
    const link = document.createElement('a')
    link.setAttribute('download', downloadName)
    const image = new Image()
    // 添加时间戳，防止浏览器缓存图片
    image.src = url + '?timestamp=' + new Date().getTime()
    // 设置 crossOrigin 属性，解决图片跨域报错
    image.setAttribute('crossOrigin', 'Anonymous')
    image.onload = () => {
      link.href = getImageBase64(image)
      link.click()
    }
  }