h5+app打包 base64图片下载问题

Question

vue写的一个app项目，在hbuilder上连接手机测试。
要实现长按图片保存到相册或者下载图片。
web端是都可以实现下载，但是移到app上就不行了。
找了很多方法，除了可以将链接形式的图片保存到手机外，都无法将base64格式的图片保存或下载下来，可以弹出下载，但是显示下载失败。
已经在前端的base64格式的图片该如何下载呢？

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答来自chatgpt:

  建议在Vue App中使用html2canvas库来生成图片，并通过下载链接进行下载。以下是实现的步骤：

  1. 在Vue App中安装html2canvas库。(npm install html2canvas)

  2. 在需要长按保存/下载的图片元素上添加ref属性。(例如: )

  3. 在methods中定义一个方法用于生成图片并下载，比如downloadImage()方法。

  4. 在downloadImage()方法中使用html2canvas库生成图片并将其转换为data URI格式。

  import html2canvas from 'html2canvas'
  
  // ...
  
  methods: {
    async downloadImage() {
      // 获取需要保存的图片元素
      const image = this.$refs.image
  
      // 使用html2canvas生成图片
      const canvas = await html2canvas(image)
  
      // 将canvas转换成data URI格式
      const dataUrl = canvas.toDataURL('image/png')
  
      // 创建一个下载链接
      const downloadLink = document.createElement('a')
  
      // 设置下载链接的属性
      downloadLink.href = dataUrl
      downloadLink.download = 'image.png'
  
      // 点击下载链接以下载图片
      downloadLink.click()
    }
  }
  

  1. 在需要触发下载的地方添加一个长按事件，调用downloadImage()方法即可。

  <template>
    <div @touchstart.prevent="timer = setTimeout(downloadImage, 1000)"
         @touchend="clearTimeout(timer)"
         @touchcancel="clearTimeout(timer)">
      <img ref="image" src="xxx.jpg">
    </div>
  </template>
  

  以上就是基于html2canvas库实现长按保存/下载图片的步骤。需要注意的是，生成的data URI格式的图片数据比较大，可能会导致移动设备性能下降。另外，在某些iOS设备上下载链接无法正常工作，可能需要进一步处理。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^