使用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");