Is it possible to take a screenshot of the rendered DOM on the server side?

Question

In my web app, the user can create some HTML/CSS markup that is saved in my database. I would like to offer a 'thumbnail' for that markup, for example in the overview view.

Since the thumbnail should be at around 200x200px, and the original markup is intended to be viewed at around 900x900px, I have to find a way to 'scale' that markup: It should be as if I took a screenshot of the rendered markup at 900px and scaled it down to 200px.

Does anybody know if this is possible using JavaScript or PHP? Or perhaps another server-side language? I would like to avoid using any 3rd party applets sucht as ActiveX.

Edit: I guess some kind of mashup, where the screenshot is taken on the client side, and then sent to the server would also be OK.

Answer 1

You can use WKHTMLTOPDF. It also has the functionality to save images called WKHTMLTOIMAGE (I think that's a different distribution, but you can download it from the same link). You can run it with exec() from PHP as a system call. Using a virtual buffer like xvfb you can run the WKHTMLTOIMAGE headless on the server. It is WebKit based so the results produced are really good...

You can scale the resulting image with standard PHP functions like described for example in these posts:

• dynamically scale images in php jpg/png/gif
• Resize image using PHP if it's too small

You might want to check my answer to this question HTML2PDF in PHP - convert utilities & scripts - examples & demos, maybe it helps you too.

Answer 2

Your best bet is to split up the job into two parts: making a screenshot, and scaling it down to 200x200. For the first part, you need a command-line tool or library that can render HTML directly to a bitmap file (probably PNG); I don't know of any on a moment's notice, but if you are really determined, I'm sure whipping up a little wrapper around webkit and libpng shouldn't be too hard if you know what you're doing. For the scaling, you can use either gd (configured on most PHP setups) or ImageMagick (more powerful). Once you have these two, it's just a matter of writing the right glue to put them together.

Answer 3

In short, there is no 'easy' way to do this.

However, this is just a duplicate of Website screenshots using PHP

Answer 4

If you want to take a screenshot of what the user sees you will necessarily have to use some client-side technology. I think you should be able to do this with flash.

This answer should probably help you: Using HTML5/Canvas/JavaScript to take screenshots

Otherwise, you might try to "recreate" a similar view on the server side, using, for example, WKHTMLTOPDF (As Michal suggests).

Answer 5

Yes this is possible, and I've even implemented a solution using a php frontend as a service entry point. The real work is handled by PhantomJS/Xvfb where the page is rendered, the javascript it executed ( very important with all the dynamically generated content on the web ).

Basically, using PhantomJS and the Xvfb framebuffer made this a very simple task, check out more here: http://code.google.com/p/phantomjs/ and here http://skookum.com/blog/dynamic-screenshots-on-the-server-with-phantomjs/

Cheers

Answer 6

I have used ABCpdf from http://www.websupergoo.com/ for this, seems to work pretty well but it is a commercial product although it comes with a free trial period. I am not affiliated with this company.