Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

generating a screenshot of a website using jquery

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.

like image 988
Tyler Avatar asked Dec 29 '10 01:12

Tyler


People also ask

How do I take a screenshot of a website using jQuery?

HTML & Script – Include the jQuery library. Create screenshot() function where initialize html2canvas on the body. By default, html2canvas set the image background color to black if save the screenshot. With the use of background: '#fff' set background white.

Is there a way to screenshot an entire website?

Click the three-dot icon from the top-right corner and select Run command. Also, you can press Ctrl+Shift+P on Windows or Command+Shift+P on Mac. Type screenshot into the search box. Select Capture full-size screenshot.

How can I take a screenshot of an entire website in one click?

One-click Screenshot. Take screenshots of entire websites. Alt+Shift+S is the default shortcut (Option+Shift+S on Mac).


2 Answers

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.

like image 166
Christian Avatar answered Oct 27 '22 07:10

Christian


There is absolutely zero chance to do that with Javascript.

Actually, there isn't a chance at all to accomplish that with any "web"'ish technique. There might be a funky flash-app, I don't know (if that exists, one more reason to hate flash :p).

like image 22
jAndy Avatar answered Oct 27 '22 08:10

jAndy