Pre-rendering html page into image

Question

I want to pre-cache next web page into a thumbnail. Is it possible to pre-render a html page (with css) into an image on-the-fly with javascript/jQuery? And how to persist that temporary image on the client?

Answer 1

Afaik, that's not possible on the client-side, because it raises security concerns. Even the <canvas> element cannot render HTML-elements (only browser plugins are allowed to use the methods provided for that purpose).

Answer 2

i was searching for a similar solution some time ago. result: this isn't possible (as far as i know)

Answer 3

You could do an ajax request requesting an image or a linkt o an image from a script. This srcipt needs to request the data needed from the website and render it using a rendering mechanism. The returned information could be a link to the generated image on the server. Performance could be pretty low depending on the data to be retrieved and rendered.

This question will show you a solution to render a website and produce a pdf. You could use this approach and convert the pdf into an image usinf ImageMagick (needs to be installed on your server).

Answer 4

What is the site written in?? If you have server side capabilities you could probably do it and send the image to be cached. Is not possible from jquery or javascript as far as I know.

Answer 5

Unless your page is absurdly complex, then it's more likely your bottleneck is in the network, rather than rendering. You can easily preload the html page and all its important resources (e.g. images, multimedia, etc), so that when the user go to the next page, you don't need to hit the network anymore and will load it from local cache.

There are a few techniques you can use to preload HTML files, invisible iframe is probably the easiest (though I never tried it myself).