Screen Grab

Turn your React component into an image.

81 followers

Turn your React component into an image.

81 followers

•

•

ScreenGrab.cloud is an API and library for creating screenshots of your react components, HTML elements, or entire website. It is primarily aimed at enabling the screenshots of website components initiated by a website visitor.

Free Options

Launch tags:API•Developer Tools•GitHub

Launch Team

CloudflareYour next app belongs on Cloudflare Workers. Deploy for free

Promoted

Screen Grab

Maker

📌

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.

Report

3yr ago

@little_llama Congratulations on the launch! Well done!

Report

3yr ago

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

Report

3yr ago

Screen Grab

Maker

@zignis ScreenGrab uses Playwright running in secure sandbox container. It waits for images to load before taking a screenshot. It renders using chrome latest so all chrome features are supported. For paid users you get a private container and we are working on opening up the whole Playwright API.

Report

3yr ago

@little_llama great work! do you plan on adding video/gif captures in the future?

Report

3yr ago

Screen Grab

Maker

@zignis Yes we are working on video capture. It will be released soon and documented on the site.

Report

3yr ago