使用 react-stl-obj-viewer 组件时如何访问画布以获取屏幕截图

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 以这种方式访问它。不确定这是否正确，但我确实得到了一个 data:image/png;base64 地址。然而，它是一个空白图像。

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

Answer 1

解决了这个问题。这是一个我需要引用的数组。var testThumbnail = geeL[0].toDataURL("image/png");&nbsp;代替&nbsp;var testThumbnail = geeL.canvas.toDataURL("image/png");