收藏
回答

canvas webgl 如何导出图片?

小程序webgl的canvas如何导出图片

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

3 个回答

  • Cailven
    Cailven
    04-08

    感谢这贴给我的启发,我把我最终解决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", {
            preserveDrawingBuffertrue
          });
    
    
          // 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(00, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);     
          wx.canvasPutImageData({
            canvasId"draw",
            datanew Uint8ClampedArray(typedArrayToBuffer(pixels)),
            x0,
            y0,
            width: width,
            height: height,
            success(res) {
              console.log(res);
              setTimeout(save, 1000);
              // save();
            },
            fail(res) {
              console.log(res);
            }
          }, self);
    
    
          function save() {
            wx.canvasToTempFilePath({
              x0,
              y0,
              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)
          }
    
    
        }
    
    04-08
    有用 2
    回复
  • 唯美的根号三
    唯美的根号三
    2019-10-14

    木头兄,有解决这个问题吗?

    2019-10-14
    有用
    回复 3
    • 木头
      木头
      2019-10-14
      看另一条评论
      2019-10-14
      回复
    • 唯美的根号三
      唯美的根号三
      2019-10-14回复木头
      我看了,没看懂,你们尽力去解决了,但是没解决的样子
      2019-10-14
      回复
    • Cailven
      Cailven
      04-08
      toDataURL好像又不能用了。坑爹
      04-08
      回复
  • A notorious liar
    A notorious liar
    2019-09-02

    直接获取当前canves内容啊然后执行下载图片就好

    2019-09-02
    有用
    回复 13
    • 木头
      木头
      2019-09-02
      你试过没,webgl的canvas不能通过id获取,会报找不到
      2019-09-02
      回复
    • A notorious liar
      A notorious liar
      2019-09-04回复木头
      !!!是我没看清楚需求
      2019-09-04
      回复
    • 朱林涛
      朱林涛
      2019-09-05回复木头
      你好,我也遇到这个问题,请问你解决了吗?
      2019-09-05
      回复
    • 木头
      木头
      2019-09-05回复朱林涛
      gl.canvas.toDataURL(),gl就是getContext的webgl
      2019-09-05
      回复
    • 朱林涛
      朱林涛
      2019-09-05回复木头
      拿到了,谢谢
      2019-09-05
      回复
    查看更多(8)
登录 后发表内容
问题标签