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

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

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 以下回答来自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设备上下载链接无法正常工作，可能需要进一步处理。


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