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