收藏
回答

canvas webgl 导出图片失效,如何挽救?

最近想在小程序上使用ar功能,使用three.js在canvas webgl上画3D物体,自然就涉及到最后的截图生成。


在拍照方法中,先截图camera,然后在新的canvas上画出来,然后想把webgl canvas的内容画出来,然是输出的webglUrl居然是空,根本拿不到数据,不知道有哪位大拿可以帮助解决这个问题,希望吧webgl canvas和camera的照片一起合成

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

4 个回答

  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    2019-10-16

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2019-10-16
    有用
    回复 3
    • 唯美的根号三
      唯美的根号三
      2019-10-16
      总共的代码太大,这部分是相机拍照的,如果可以的话,你弄个webgl的canvas替换就行了。。。
      2019-10-16
      回复
    • 唯美的根号三
      唯美的根号三
      2019-10-16
      2019-10-16
      回复
    • 社区技术运营专员-娇华
      社区技术运营专员-娇华
      2019-10-16回复唯美的根号三
      提供一个简单的可复现问题的demo即可
      2019-10-16
      回复
  • Cailven
    Cailven
    05-14
            var width;
          var height;
          var gl = self.canvas.getContext("webgl", {
            preserveDrawingBuffer: true
          });
          self.renderer.render(self.scene, self.camera);
          width = gl.drawingBufferWidth;
          height = gl.drawingBufferHeight;
          const pixels = new Uint8Array(width * height * 4);
          gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
          var dataArray = new Uint8ClampedArray(typedArrayToBuffer(pixels));
          putImgData();
    
    
          function putImgData() {
            wx.canvasPutImageData({
              canvasId: "draw",
              data: dataArray,
              x: 0,
              y: 0,
              width: width,
              height: height,
              success: (res) => {
               wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              width: width,
              height: height,
              destWidth: width,
              destHeight: width,
              canvasId: 'draw',
              success: (res) => {
                callback(res);
              },
              fail: (res) => {
                console.log(res);
              }
            }, self)
              },
              fail(res) {
                console.log(res);
              }
            }, self);
          }
    
    function typedArrayToBuffer(array) {
            return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
          }
    
    05-14
    有用
    回复
  • 🌞
    🌞
    2019-12-16

    你好,请问解决了吗。。我也需要把<canvas type = "webgl"> 生成一张图片。。也是用three.js

    2019-12-16
    有用
    回复 3
  • alan🥱
    alan🥱
    2019-10-16

    小程序貌似没有提供toDataUrl接口,你应该用

    wx.canvasToTempFilePath

    https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html

    2019-10-16
    有用
    回复 7
    查看更多(2)
登录 后发表内容
问题标签