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.

Pretty much impossible using JS only. – Dejan Marjanović Dec 29 '10 at 01:58 — Dejan Marjanović, Dec 29 '10 at 01:58
If you only want to use JavaScript, then why the `php` tag? – T.J. Crowder Dec 29 '10 at 02:04 — T.J. Crowder, Dec 29 '10 at 02:04

score 12 · Accepted Answer · edited Apr 11 '17 at 15:13

12

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.

edited Apr 11 '17 at 15:13

Castrillon7

3
4

answered Dec 29 '10 at 02:14

Christian

27,509
17
111
155

This is probably the correct answer, page is parsed using Webkit layout engine and then saved as an image. – Dejan Marjanović Dec 29 '10 at 02:26

score 1 · Answer 2 · answered Nov 08 '12 at 10:02

1

Bit old, but I faced the same problem and found http://html2canvas.hertzen.com/

answered Nov 08 '12 at 10:02

Jonathan de M.

9,721
8
47
72

Uses flash. Can't rely on the visitor running flash, if it's a public-facing site. – random_user_name Dec 17 '12 at 20:30

score 1 · Answer 3 · answered Dec 29 '10 at 01:57

1

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).

answered Dec 29 '10 at 01:57

jAndy

231,737
57
305
359

score 1 · Answer 4 · answered Dec 29 '10 at 02:12

Not gonna happen. The ONLY way you MIGHT be able to do this with JS is if the site is hosted on YOUR server and you have JS trigger to some shell script that renders the users page on your local server and saves it as an image.

You want a subscription to browser shots

score 1 · Answer 5 · edited Oct 23 '11 at 10:32

1

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.

edited Oct 23 '11 at 10:32

Alba Mendez

4,432
1
39
55

answered Oct 22 '11 at 21:43

napster

125
9

It's possible with canvas html5 + javascript – Marcio May 05 '14 at 10:36

score 0 · Answer 6 · answered Nov 28 '12 at 02:51

0

In pure js it is not possible at moment.

I installed cutycap on my server which is responsible for generating the pictures and with some js ajax magic you can easily create your own screen shoot - thumbnail service

answered Nov 28 '12 at 02:51

nfo

637
2
6
19

score 0 · Answer 7 · answered Apr 18 '15 at 05:20

0

Need to get screenshot website see checkout this is one phpwdn.com

answered Apr 18 '15 at 05:20

Sturt Edwin

1

score 0 · Answer 8 · answered Dec 29 '10 at 02:06

0

You can't do this just with JavaScript. You have to use a service like SnapCasa or similar (which basically comes down to an img tag in the right format, so it's all client-side from your perspective).

answered Dec 29 '10 at 02:06

T.J. Crowder

1,031,962
187
1,923
1,875

score -1 · Answer 9 · answered Sep 10 '13 at 07:29

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

generating a screenshot of a website using jquery

9 Answers9

Linked

Related