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.