Screen Grab - Turn your React component into an image

We (MemeZoo.app) developed a meme creation site with social media sharing of meme images. We needed a way to share meme images which had text caption overlays, likes and avatars. We first tried to draw this onto a canvas object and exporting this to PNG. This was difficult. We then tried a few libraries and decided on html2canvas. This worked well but was not consistent with the actual HTML rendering, especially with text and image sizes, position. It was also dependent on the users device. We soon realized we needed consistent image captures. We decided to try an automated server approach. Three days later we had a microservice that captured screenshots of the meme component when the user clicked share. We tested this approach on graphs, social media content, data tables, complex UI and the results were consistent screenshots.

Hey there @little_llama! Only devs can explain how useful it actually is. Keep up the fantastic work! You're doing it so great

Good tool, can you share some details about the internals if you don't mind? Does it use Puppetter to capture screenshots, or uses a custom dom parser to construct an svg and then to a png? Also, what feature subsets are supported (css filters, masks, custom fonts, waiting for images to load).

I use screenshots for testing. Being able to create screenshots by the website visitor is really unique and cool!

I'm yet to try this. But from the videos I've seen it looks really amazing and easy. I can't wait to try it out

Hey there @little_llama! Only devs can explain how useful it actually is. Keep up the fantastic work! You're doing it so great

Congratulations on reaching a significant milestone

Nicely

Congratulations on this big launch

Congrats team Screen Grab on your launch.

Very good product

Very good product