微信小程序three.js canvas type=“webgl“导出图片

微信小程序three.js canvas type="webgl"导出图片

type="webgl"的canvas标签内添加一个type="2d"的canvas

 <canvas id="canvasWebGL" class="canvasWebGL" type="webgl" disable-scroll="true">
 	<canvas class="helper-canvas" type="2d" id="helperCanvas"></canvas>
 </canvas>

// 主要方法

saveImage() {
    // console.log('saveImage');
    var that = this
    const query = wx.createSelectorQuery();
    query.select('#helperCanvas').fields({
      node: true,
      size: true
    }).exec((res) => {
      // console.log('res[0].node', res[0].node);
       clipWebgl(res[0].node)
        .then(webglImg => {
          
           this.cameraContext.takePhoto({
            quality: 'high',
            success: (result) => {
              
              wx.navigateTo({
                url: '/pages/save/index?cameraUrl=' + result.tempImagePath + '&canvasUrl=' + webglImg.path + '&pages=face',
              })
              this.setData({
                isloading: false
              })
    
            }
          })
        });
    })
    function clipWebgl(helperCanvas) {
      return new Promise((resolve, reject) => {
      
        const [data, w, h] = model.screenshot();
        const ctx = helperCanvas.getContext('2d')
        const imgData = helperCanvas.createImageData(data, w, h);
        helperCanvas.height = imgData.height;
        helperCanvas.width = imgData.width;
  
        ctx.putImageData(imgData, 0, 0);
  
        wx.canvasToTempFilePath({
          canvas: helperCanvas,
          success(res) {
            resolve({
              path: res.tempFilePath,
              width: imgData.width,
              height: imgData.height
            })
          },
          fail(err) {
            reject(err);
          }
        })
      })
    }
  }

mode.js

function screenshot() {
  const {
    width,
    height
  } = renderer.domElement;
	
  const renderTarget = new THREE.WebGLRenderTarget(width, height);
  const buffer = new Uint8Array(width * height * 4);

  renderTarget.texture.encoding = renderer.outputEncoding;
  renderer.setRenderTarget(renderTarget);
  renderer.render(scene, camera);
  renderer.readRenderTargetPixels(renderTarget, 0, 0, width, height, buffer);
  renderer.setRenderTarget(null);
  renderTarget.dispose();

  flip(buffer, width, height, 4);
  return [buffer, width, height];
}

function flip(pixels, w, h, c) {
  // handle Arrays
  if (Array.isArray(pixels)) {
    var result = flip(new Float64Array(pixels), w, h, c);
    for (var i = 0; i < pixels.length; i++) {
      pixels[i] = result[i];
    }
    return pixels;
  }

  if (!w || !h) throw Error('Bad dimensions');
  if (!c) c = pixels.length / (w * h);

  var h2 = h >> 1;
  var row = w * c;
  var Ctor = pixels.constructor;

  // make a temp buffer to hold one row
  var temp = new Ctor(w * c);
  for (var y = 0; y < h2; ++y) {
    var topOffset = y * row;
    var bottomOffset = (h - y - 1) * row;

    // make copy of a row on the top half
    temp.set(pixels.subarray(topOffset, topOffset + row));

    // copy a row from the bottom half to the top
    pixels.copyWithin(topOffset, bottomOffset, bottomOffset + row);

    // copy the copy of the top half row to the bottom half
    pixels.set(temp, bottomOffset);
  }

  return pixels;
}