我正在使用組件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 后，我需要對圖像做些什么嗎？