Convert screenshot when load

[atraining]

IIn Sidebar.js I have seen

<img src={highlight.content.image} alt={"Screenshot"} />

In my case I only have the coordinates of the boundingRect I want to display. What is the easiest way to create the image (content.image) from the HTMLCanvas when the page loads the first time?

In the demo/sr/App.js the image is first rendered when the boundingRect changes

                 <AreaHighlight
                      highlight={highlight}
                      onChange={boundingRect => {
                        this.updateHighlight(
                          highlight.id,
                          { boundingRect: viewportToScaled(boundingRect) },
                          { image: screenshot(boundingRect) }
                        );
                      }}
                    />

[agentcooper]

Would exposing ref on <PdfHighlighter /> help?

<PdfHighlighter
  ref={pdfHighlighter => {
    // save instance
    this.pdfHighlighter = pdfHighlighter;
  }}
  {...restProps}
/>;

// later
this.pdfHighlighter.screenshot(/* ... */);

[qbdchandresh009]

Would exposing ref on <PdfHighlighter /> help?

<PdfHighlighter
  ref={pdfHighlighter => {
    // save instance
    this.pdfHighlighter = pdfHighlighter;
  }}
  {...restProps}
/>;

// later
this.pdfHighlighter.screenshot(/* ... */);

this is give me blank image please help me