1

Is there a way in which you can get a screenshot of another websites pages?

e.g: you introduce a url in an input, hit enter, and a script gives you a screenshot of the site you put in. I manage to do it with headless browsers, but I fear that could take too much resources and time, to launch. let's say phantomjs each time the input is used the headless browser would need to get the new data, I investigate HotJar, it does something similar to what I'm looking for, but it gives you a script that you must put into the page header, which is fine by me, afterwards, you get a preview, how does it work?, and how can one replicate it?

Andrew Alizaga
  • 124
  • 1
  • 12

2 Answers2

2

Do you want a print screen of your page or someone else's?

Own page

Use puppeteer or phantomJS with Beverly build of your site, this way you will only run it when it changes, and have a screenshot ready at any time.

Foreign page

You have access to it (the owner runs your script)

Either try to get into his build pipeline, and use solution from above.

Or use this solution Using HTML5/Canvas/JavaScript to take in-browser screenshots.

You don't have any access

Use some long-running process that will give you screenshot when asked.

Imagine a server with one URL endpoint: screenshot.example.com?facebook.com.

The long-running server has a puppeteer/phantomJS instance ready to go when given URL, it will flood that page, get the screenshot and send it back. The browser will actually think of it as a slow ping image request.

Akxe
  • 9,694
  • 3
  • 36
  • 71
  • Any idea of how an script like that would work?, (referring to your second suggestion), I only imagine sending the html and css to the server, but I'm not sure if there's a more efficient aproach – Andrew Alizaga May 06 '20 at 17:51
  • Be more precise, there is a solution for all 3 cases, which one is yours, what have you tried? Sending HTML + CSS to server is completely wrong, it won't do anything good there. – Akxe May 06 '20 at 18:54
0

You can make this with puppeteer

install with: npm i puppeteer

save the following code to example.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

and run it with: node example.js

Efi Gordon
  • 406
  • 1
  • 6
  • 9
  • 1
    OP said: `I fear that could take too much resources and time, to launch`. You don't address that in any way. – Akxe May 05 '20 at 17:55