How can I capture webpage screenshots with JavaScript?

user_1858727 0
Viewed 139

I want to take a screenshot of the webpage so that it can be used to share on various social media platforms. The webpage has visual elements displayed in iframe which are from different domain (not same origin).

So far i have checked

  1. html2canvas, but looks like there is a limitation where the screenshot wolud not be generated properly if there are visual elements on the page loaded from different origin

  2. getUserMedia: but looks like this triggers a user image capture and not webpage capture. here is link to codepen i found https://codepen.io/jgalazm/pen/bGEgEGW

Here are couple of my questions:

  1. Is my understanding correct that getUserMedia cannot be used to capture webpage screenshot?
  2. What other alternatives i can use to capture the webpage screenshot?

Thanks.

javascript
1 Answers

what I've found best is to handle this server side.

So you use selenium with chrome / firefox / phantom js and you render and then take the screen shot through the selenium api.

selenium is primarly Java or Python

https://pythonspot.com/selenium-take-screenshot/

if javascript is more of your thing than opt for puppeteer

https://buddy.works/guides/how-take-screenshots-with-puppeteer-headless-chrome

Deployment

If I knew more about your backend then I could answer more thoroughly.

If you are using a cloud provider, I'd recommend a serverless function.

If you have a node server than Puppeteer

If you have a python server than selenium.

user_64714940
Related