0

I need to dynamically generate images containing a persons photo and various bits of 'status' information. I have some designs from our designer.

Looking at the designs the easiest way (for me) would be to generate that look using the tools I know - HTML, CSS, ReactJs etc.

But how can I essentially 'take a screenshot' (on the server) of what the browser would see and then save that out to a PNG?

Ideally I'd like to do this in nodejs but happy to consider c# or java or other languages if need be.

I know that nodejs will let you run a 'headless browser' for testing but what I want to do is essentially 'take a visual snapshot' of what those browsers 'see' and save to a png?

Keen to write this and run it on our server so looking for suggestions involving how I could code this up rather than an external service, if possible.

Thanks in advance!

utunga
  • 468
  • 5
  • 15
  • Are you sending the views from Node.js server or running the front end on different server/FWs like angular, react? Do you need for the testing reporting or from the acutal website? – Apoorva Chikara May 28 '21 at 06:16
  • Hey thanks for the question.. uhm it's a little bit snake eating its own tail I guess. What I had in mind was image_url -> nodejs route (check.cache) -> headless browser -> reactjs frontend (hosted by same nodejs) – utunga May 28 '21 at 08:07
  • Still looking into this but this looks relevant https://stackoverflow.com/questions/55031823/how-to-make-puppeteer-work-with-a-reactjs-application-on-the-client-side – utunga Jun 02 '21 at 00:29

0 Answers0