收藏
回答

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

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


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

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

5 个回答

  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    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
      回复
  • €疏离
    €疏离
    03-05

    你好,请问找到解决办法了吗?我也要做这样的功能

    03-05
    有用
    回复 2
  • Cailven
    Cailven
    2020-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)
          }
    
    2020-05-14
    有用
    回复 3
    • 酥小梨
      酥小梨
      2020-11-07
      您好,我用您的方法不能将 gl.readPixels 获得图片数据绘制到 canvasId 为 draw 的画布上:canvasPutImageData 的 success 回调函数不会被执行。我觉得可以能是 width 和 height 太大的原因,然后我对获得的图片数据降低了分辨率。目前可以绘制到 2d 的画布上,但是只能绘制出画面中 new THREE.Scence().background 的颜色,其他物体不会出现在 2d 中。请问这个改如何解决了呢?
      2020-11-07
      回复
    • Cailven
      Cailven
      01-06回复酥小梨
      别用2d,用不带type的canvas
      01-06
      回复
    • €疏离
      €疏离
      03-05
      用这个办法微信开发者工具和真机都变得特别特别卡,而且最后得到的图片是一个空白图片
      03-05
      回复
  • 🌞
    🌞
    2019-12-16

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

    2019-12-16
    有用
    回复 3
    • 唯美的根号三
      唯美的根号三
      2019-12-16
      没呢,说后续支持
      2019-12-16
      回复
    • 🌞
      🌞
      2019-12-16回复唯美的根号三
      好 谢谢,有没有其他方法可以生成呢?还是只能等官方支持了
      2019-12-16
      回复
    • 唯美的根号三
      唯美的根号三
      2019-12-17回复🌞
      没其他办法,只能。。。
      2019-12-17
      回复
  • alan😐
    alan😐
    2019-10-16

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

    wx.canvasToTempFilePath

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

    2019-10-16
    有用
    回复 7
    • 唯美的根号三
      唯美的根号三
      2019-10-16
      webgl类型的,使用这个无效
      2019-10-16
      回复
    • alan😐
      alan😐
      2019-10-16回复唯美的根号三
      我自己试了下。。我的成功输出了
      2019-10-16
      回复
    • 唯美的根号三
      唯美的根号三
      2019-10-16回复alan😐
      兄弟,webgl的canvas哦,你别搞错了
      2019-10-16
      回复
    • alan😐
      alan😐
      2019-10-16回复唯美的根号三
      我知道,我的意思是我用toDataURL导出来base64了,但是保存成.png之后,用不了
      2019-10-16
      回复
    • 唯美的根号三
      唯美的根号三
      2019-10-16回复alan😐
      安卓可以,IOS不行,安卓可以吧base64丢给网络,然后网络请求把他转成网络图片
      2019-10-16
      回复
    查看更多(2)
登录 后发表内容
问题标签