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.
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.
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).
@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.
Screen Grab
Screen Grab
Screen Grab