使用js对tensorspace/three.js/webgl进行截图

问题分析

场景：在右侧，是 tensorspace库使用three.js 调用webgl 对模型进行渲染的画面。我需要使用js对右侧画面进行截图，并保存至本地用于分析。

问题：对webgl进行截图需要进行一些特别的操作，使用html2canvas行不通。同时，针对tensorspace这种第三方库，我们需要得到renderer实例。

思路：

获取renderer、camera、scene实例，渲染一次。
读取像素数据并反转。
创建新的canvas，将数据复制到新的canvas上
保存或展示图片。

完整代码

const test = () => {
  // 注意获取tensorspace的model实例
  const renderer = model.modelRenderer.renderer;
  const scene = model.modelRenderer.scene;
  const camera = model.modelRenderer.camera;
  renderer.render(scene, camera); // 首先渲染一次

  const canvas = document.getElementsByTagName('canvas')[0];
  const newCanvas = document.createElement('canvas');
  newCanvas.width = canvas.width;
  newCanvas.height = canvas.height;
  const ctx = newCanvas.getContext('2d');
  const gl = canvas.getContext('webgl');
  
  // 读取像素数据
  const buffer = new Uint8Array(canvas.width * canvas.height * 4);
  gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, buffer);
  // 将像素数据翻转
  const flippedBuffer = new Uint8Array(buffer.length);
  for (let y = 0; y < canvas.height; y++) {
    for (let x = 0; x < canvas.width; x++) {
      for (let c = 0; c < 4; c++) {
        flippedBuffer[(y * canvas.width + x) * 4 + c] = buffer[((canvas.height - y - 1) * canvas.width + x) * 4 + c];
      }
    }
  }

  // 复制到新的canvas
  const imageData = new ImageData(new Uint8ClampedArray(flippedBuffer), canvas.width, canvas.height);
  ctx.putImageData(imageData, 0, 0);
  
  // 打开新的窗口
  var w = window.open('', '');
  w.document.title = "DNA_screen";
  w.document.body.style.backgroundColor = "white";
  var img = new Image();
  img.src = newCanvas.toDataURL();
  w.document.body.appendChild(img);
 // 保存图像并下载
  const dataURL = newCanvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.download = 'tensorspace.png';
  link.href = dataURL;
  link.click();
};