使用react-stl-obj-viewer组件时如何访问canvas截图

Question

我正在使用组件react-stl-obj-viewer来渲染 3d stl 图像。 我可以正确渲染 3d stl 图像。 渲染图像后，我会尝试移动它并有一个按钮来截取它的屏幕截图。

<div>
  <STLViewer
    onSceneRendered={(element) => {
      console.log(element);
    }}
    sceneClassName="test-scene"
    file={this.state.selectedFile}
    modelColor="#073FE9"
  />
</div>
<div style={{ display: "inline-block" }}>
  <Button
    id="thumbnail"
    style={{ zIndex: "-1", margin: "20px 0px 20px 0px" }}
    onClick={(e) => {
      this.save3dRender(e, webGlContextExists);
    }}
  >
    Save Frame as Thumbnail
  </Button>
  {!this.state.showThumbnail ? (
    <Container>
      <h2>Did you get this image</h2>
      <Image src={this.state.thumbnailFile} />
    </Container>
  ) : null}
</div>

为了截取图片，我尝试使用.toDataURL("image/png")。 我的按钮在按下时执行此操作。

  save3dRender = (e, geeL) => {
    e.preventDefault();

    var testThumbnail = geeL.canvas.toDataURL("image/png");
    this.state.thumbnailFile = testThumbnail;
    this.state.thumbnailFileRender = true;
    this.state.showThumbnail = false;
  };

我对此有些陌生，但认为我走在正确的轨道上。 由于 STLViewer 组件正在创建 canvas，因此我试图以这种方式使用 .canvas 访问它。 不确定这是否正确，但我确实得到了一个 data:image/png;base64 地址。 然而，它是一个空白图像。

我访问的是正确的 canvas 吗？ 在将图像作为 data:/image/png;base64 后，我需要对图像做些什么吗？

Answer 1

解决了这个问题。 这是一个我需要引用的数组。

var testThumbnail = geeL[0].toDataURL("image/png"); 而不是var testThumbnail = geeL.canvas.toDataURL("image/png");