收藏
回答

webgl canvas 渲染的图片无法获取或者保存

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug toDataURL/Canvas 微信iOS客户端 8.0.39 2.25.0

webgl context 的canvas 无法通过toDataURL 获取到渲染的图片,这是个老问题了,最近有个需求想要用小程序的VisionKit 做一些人脸识别的功能。我们是希望按照文档案例中的形式,将VisionKit session 返回的相机的y/uv texture 写入到canvas 中同时在追加我们自己的一些识别动画的绘制,然后用户识别完成之后可以点击拍照,这个拍照依然是遇到数据拿不出来的问题。尝试用我2年前在另一个项目中的方案,结果也不行:

https://developers.weixin.qq.com/community/develop/doc/00024a884f8598d4049bcd80d51000

canvas 的context 通过readPixels 拿到图片数据,然后在把这些数据直接写到一个2D canvas 中,最后通过这个2D canvas 的toDataURL 拿到编码之后的图片。

其次涉及到人像拍照,用于展示的Canvas 基本是基于实际分辨率来的(pixelRatio跟屏幕一直),我之前那个方案里,是降低了显示用的canvas 的pixelRatio以此降低readPixels 需要读取的数据量。

本来我以为AI推理那个style transfer的 demo里面有实现这个基于VKSession 的canvas 拍照逻辑,结果那个窗口就真的是一个camera。我还尝试把VKSession 的相机那部分渲染到一个FBO里,然后去读这个FBO,也是读不到(不过这里是用Threejs 来读的,应该没什么影响)。

最后,希望官方可以有一个好的方案,似乎这么多年这个问题一直在iOS端存在。

回答关注问题邀请回答
收藏

1 个回答

  • L
    L
    2023-07-27

    遇到相同的问题,尝试readPixels读取imageData绘制到canvas 2d再导出图片。发现安卓导出图片旋转了180度,ios则直接是空白图片

    2023-07-27
    有用
    回复
登录 后发表内容