小程序
小游戏
企业微信
微信支付
扫描小程序码分享
小程序webgl的canvas如何导出图片
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
感谢这贴给我的启发,我把我最终解决webgl导出图片的方法分享给大家。
1、在webgl的canvas外再建一个新的2d canvas(作为存图中转)。css里设置left:-1000移到画面外面。
2、使用 gl.readPixels获取到webgl canvas的帧缓存的二进制流(Uint8Array)。
3、使用wx.canvasPutImageData把二进制流推给中转的2d canvas。
4、使用wx.canvasToTempFilePath导出2d canvas上的截图。
亲测成功后,稍后我把代码整理成片段分享给大家。(注:开发者工具里readPixels取不到值一直是全黑,真机是好的。)
saveImg: function () { // var gl = renderer.getContext(); var gl = canvas.getContext("webgl", { preserveDrawingBuffer: true }); // gl.clearColor(1, 1, 0, 1); // gl.clear(gl.COLOR_BUFFER_BIT); // renderer.render(scene, camera); const { drawingBufferWidth: width, drawingBufferHeight: height } = gl; const pixels = new Uint8Array(width * height * 4); gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels); wx.canvasPutImageData({ canvasId: "draw", data: new Uint8ClampedArray(typedArrayToBuffer(pixels)), x: 0, y: 0, width: width, height: height, success(res) { console.log(res); setTimeout(save, 1000); // save(); }, fail(res) { console.log(res); } }, self); function save() { wx.canvasToTempFilePath({ x: 0, y: 0, width: width, height: height, destWidth: width, destHeight: height, canvasId: 'draw', success(res) { console.log(res.tempFilePath); wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, //仅为示例,并非真实的资源 success(res) { } }) }, fail(res) { console.log(res); } }, self) } function typedArrayToBuffer(array) { return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset) } }
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
执行重新渲染图像函数,然后立马执行导出函数,我项目用的webgl2模式可以这样导出
木头兄,有解决这个问题吗?
直接获取当前canves内容啊然后执行下载图片就好
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
感谢这贴给我的启发,我把我最终解决webgl导出图片的方法分享给大家。
1、在webgl的canvas外再建一个新的2d canvas(作为存图中转)。css里设置left:-1000移到画面外面。
2、使用 gl.readPixels获取到webgl canvas的帧缓存的二进制流(Uint8Array)。
3、使用wx.canvasPutImageData把二进制流推给中转的2d canvas。
4、使用wx.canvasToTempFilePath导出2d canvas上的截图。
亲测成功后,稍后我把代码整理成片段分享给大家。(注:开发者工具里readPixels取不到值一直是全黑,真机是好的。)
saveImg: function () { // var gl = renderer.getContext(); var gl = canvas.getContext("webgl", { preserveDrawingBuffer: true }); // gl.clearColor(1, 1, 0, 1); // gl.clear(gl.COLOR_BUFFER_BIT); // renderer.render(scene, camera); const { drawingBufferWidth: width, drawingBufferHeight: height } = gl; const pixels = new Uint8Array(width * height * 4); gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels); wx.canvasPutImageData({ canvasId: "draw", data: new Uint8ClampedArray(typedArrayToBuffer(pixels)), x: 0, y: 0, width: width, height: height, success(res) { console.log(res); setTimeout(save, 1000); // save(); }, fail(res) { console.log(res); } }, self); function save() { wx.canvasToTempFilePath({ x: 0, y: 0, width: width, height: height, destWidth: width, destHeight: height, canvasId: 'draw', success(res) { console.log(res.tempFilePath); wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, //仅为示例,并非真实的资源 success(res) { } }) }, fail(res) { console.log(res); } }, self) } function typedArrayToBuffer(array) { return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset) } }
执行重新渲染图像函数,然后立马执行导出函数,我项目用的webgl2模式可以这样导出
木头兄,有解决这个问题吗?
直接获取当前canves内容啊然后执行下载图片就好