Screenshot of a tweet in ReactJS [closed]

I need to create a screenshot of a tweet to then store it in a PostgreSQL DB and/or show it in my webpage (show the screenshot) made in ReactJS, with Typescript. I use react-tweet-embed to show the tweet but I’m in need to store the picture of that tweet in my DB.

Does a library exist already with this available?

Answer

Library html2canvas allows you to capture part of a webpage on a canvas.

See: https://html2canvas.hertzen.com/

The issue you might be facing is that this library works with HTML elements. However you may give certain React elements an id, className or use ref.

const Capturable = ({ children }) => {
    const divRef = useRef();

    const onClick = useCallback(async () => {
        // This canvas contains "image" of rendered element "div" and it's children
        const canvas = await html2canvas(divRef.current);
        // Turn it to blob and send it away
        canvas.toBlob(blob => {
            sendToDb(blob);
        });
    }, [])

    return (
        <div>
            <div ref={divRef}>{children}</div>
            <button onClick={onClick}>Capture!</button>
        </div>
    );
}

With code above

<Capturable>
  <SomethingElseInside />
</Capturable>