用 type=2d的版本是可以的。没有type的不行
小程序canvas画布iphone真机无法设置scale为负数小程序canvas画布iphone真机无法设置scale为负数,设为负数会变成正1
2020-04-10感谢这贴给我的启发,我把我最终解决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) } }
canvas webgl 如何导出图片?小程序webgl的canvas如何导出图片
2020-04-08H5里放入小程序码,完成H5后提示用户长按识别小程序码,实现跳转。
h5跳转小程序向微信好友分享h5 点击跳转到小程序
2018-12-18