2

I'm working on a project where I need to basically take the screenshot of the pages users create on my application, and I'm not sure where to start.

I've looked at other sites that do this like about.me and I'm wondering what they might be doing to create screenshots of pages. Example: https://about.me/search/#!/tag/MIT

The thumbnails are basically an exact copy of the page (including fonts, etc...)

How can I approach this? Client side, server side?

steve
  • 3,878
  • 7
  • 34
  • 49
  • 1
    See if this helps: http://stackoverflow.com/questions/5336102/how-to-save-specific-part-of-page-as-image-using-javascipt it uses canvas – Yuriy Galanter May 08 '13 at 01:55

5 Answers5

3

Take a look at wkhtmltoimage. Feed it some HTML and it will render an image of what the page might look like in a Webkit browser ("might" because browsers vary and Webkit is constantly being worked on)

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • Careful: "Do not use wkhtmltopdf with any untrusted HTML – be sure to sanitize any user-supplied HTML/JS, otherwise it can lead to complete takeover of the server it is running on." https://wkhtmltopdf.org/status.html – Avatar Feb 01 '22 at 07:48
3

It looks like the answer to this question is what you're after.

Using HTML5/Canvas/JavaScript to take screenshots

Otherwise:

Via: How to screenshot website in JavaScript client-side / how Google did it? (no need to access HDD)

$10/month: http://bugmuncher.com/

or http://usersnap.com/

Are you hoping for an automated process, or for one that's initialised by the user?

Either way to screenshot a page you will need the page to be rendered somewhere -> either by a browser or some other method. This is easier to do on a client as there are a lot of browsers and other rendering programs that do the footwork for you, all you have to do then is figure out how to get a screenshot/copy of the rendered page using javascript.

Community
  • 1
  • 1
Griffork
  • 683
  • 1
  • 5
  • 21
1

I have had to do this before for a client and from experience one of the easiest ways of doing this is to use a free, third-party service called GrabzIt. They are really reliable, fast and have APIs for five different languages including PHP.

http://grabz.it/

include("GrabzItClient.class.php");

$grabzIt = new GrabzItClient("APPLICATION KEY", "APPLICATION SECRET");
$id = $grabzIt->TakePicture("http://www.google.com");

//wait a certain amount of time

$result = $grabzIt->GetPicture($id);

if (!$result)
{
return;
}

file_put_contents("images" . DIRECTORY_SEPARATOR . $filename, $result);
WaPaRtY
  • 500
  • 3
  • 5
1

About.com uses http://url2png.com/ to take screenshots. There are other services like https://browshot.com/. This means that the user page must be saved a reproduced later for the external service to take a screenshot if it:

  1. save user page to UrlA
  2. call web service to take screenshot of UrlA
Julien
  • 5,729
  • 4
  • 37
  • 60
  • Thanks, and you're right about.me is listed as one of the customers of url2png. I'm gonna end up using wkhtmltoimage though, as Kolink suggested. – steve May 08 '13 at 02:59
1

You basically have two options: render it client side or server side.

For client side rendering you have a few options - the most popular one is html2canvas. The downside with html2canvas is that it's not always accurat, especially if you use a lot of psoition absolute, fixed, .. in addition you might need a proxy to come over cors issues while loading images.

For server side rendering you could use something like puppeteer, which basically allows you to start a chromium browser and take a screenshot. On the JS side you basically collect all html and send that over to your server which renders the website given the viewport, scrollposition, etc.

You could also use something like Gleap, which basically combines both approaches.

Lukas
  • 1,346
  • 7
  • 24
  • 49
  • "Puppeteer is a **Node.js** library which provides a high-level API to control Chrome/Chromium over the DevTools Protocol. Puppeteer runs in headless mode by default." – Avatar Aug 27 '23 at 18:08