How to access canvas for a screenshot when using react-stl-obj-viewer component

Question

I'm using a component react-stl-obj-viewer to render a 3d stl image. I can render the 3d stl image correctly. Once the image is rendered, I'm trying to move it around and have a button to take a screenshot of it.

<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>

In order to take a screenshot of the image, I was trying to use.toDataURL("image/png"). My button does this when pressed.

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

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

I am somewhat new at this but thought I was on the right track. Since the STLViewer component is creating the canvas, I was trying to access it this way with.canvas. Not sure if that is correct but I do get a data:image/png;base64 address. However it is a blank image.

Am I accessing the correct canvas? Is there something I need to do to the image after getting it as data:/image/png;base64.

Answer 1

Fixed the issue. It was an array that I needed to reference.

var testThumbnail = geeL[0].toDataURL("image/png"); instead of var testThumbnail = geeL.canvas.toDataURL("image/png");