generating a screenshot of a website using jquery

Question

I would like to generate a screenshot thumbnail of any given url using strictly javascript. If this can't be done can anyone point me in the right direction to do this with my own api?

edit I just decided to cheat and use frames because it was for something I was doing for fun anyway, but thanks for all the great answers khtmltox is probably the best choice if you want to do something like this... they also have php bindings aswell.

Answer 1

I recently created a REST API anyone can use to generate screenshots of websites. It is for free ( ofcourse ) and might can help you aswell.

Below are the links to some of my experiments.

Mashable ScreenShot http://storage.damnovae.com/issac/ba3d01a1ddeeb068fd365eb8468c4cd35150d143.png

Pinterest http://storage.damnovae.com/issac/f3419f73e840f2684fa15cb14154d507484b7318.png

Envato Screenshot with mobile portview http://storage.damnovae.com/issac/81c875e6622ca105db4135b19cde6b83d148b21f.png

How does it work

Get your pastiche account api key , and make post request to the api url to generate screenshots. You can read more here http://damnovae.com/pastiche

Answer 2

There is no way to do this in Javascript.

I believe this can be done via server-side using third-party software.
Have a look at this tutorial for more info.

Answer 3

If you look at wkhtmltox, there's native lib/app for converting a webpage to an image.

<?php // file: img.php
    $img=render_image($_GET['url']);
?>


<!-- Your Website -->

<img alt='ldr'/>

<script type="text/javascript">
    $(document).ready(function(){
        var url='http://google.com/';
        $('#img').attr('src','img.php?url='+encodeURIComponent(url));
    });
</script>

In case the comment wasn't clear enough, you need PHP somewhere which could run a native program.