how to create a snapshot of web page

[chump2877]

I'm trying to figure out how to generate snapshot, thumbnail-like images of live web pages on the Internet. The images will be used to preview text links, appearing when you mouse over the links.

I've done some searching on this, and I can't find a solution that doesn;t involve manipulating someone else's online web service (i.e., http://www.websnapr.com/) with a client-side scripting language like JavaScript.

I'd prefer to generate the snapshots myself, with my own script, and then use JavaScript to manipulate the results (of my script).

The problem is that I can't figure out how the web site snapshots were created. Can you use PHP to do this, perhaps using the image functions?

If you can use PHP to accomplish the snapshot images, I'd appreciate anyone who could steer me in the right direction here. Some sample code illustrating how this is done -- or a tutorial -- would help.

Thanks.

[mlseim]

From what I've seen you need to do it one of these ways ...

1) Have some software running on your own web server (you host your own website).
2) Use some ActiveX applications on your own server if Windows.
3) Use an outside (remote) service.

So the answer is no ... you can't just use PHP to create a thumbnail
from a URL. At least I have never seen a way to do it.

I also checked with Perl ... same thing. You need your own server.

[oesxyl]

Originally Posted by chump2877

I'm trying to figure out how to generate snapshot, thumbnail-like images of live web pages on the Internet. The images will be used to preview text links, appearing when you mouse over the links.

I've done some searching on this, and I can't find a solution that doesn;t involve manipulating someone else's online web service (i.e., http://www.websnapr.com/) with a client-side scripting language like JavaScript.

Few month ago I have the same question,

http://www.boutell.com/webthumb/

There is a windows solution, but I don't bookmark the site.

I'd prefer to generate the snapshots myself, with my own script, and then use JavaScript to manipulate the results (of my script).

The problem is that I can't figure out how the web site snapshots were created. Can you use PHP to do this, perhaps using the image functions?

If you can use PHP to accomplish the snapshot images, I'd appreciate anyone who could steer me in the right direction here. Some sample code illustrating how this is done -- or a tutorial -- would help.
Thanks.

I still looking for a solution, above link use xvfb and that means you must have x instaled on the server and, if I'm not wrong, a browser.
Let's say that you can avoid, rewriting the code, to use the browser but you still need xvfb.

PS: I need a perl solution not php, but if there is one, could be easy ported. Please post any usefull info here, I'll do the same.

best regards and happy new year.

[Eternity Angel]

Why not just make the screen shots yourself? I'm sure webpages wouldn't change all that much over a month or so, so just update them yourself every month or so.

[oesxyl]

Originally Posted by Eternity Angel

Why not just make the screen shots yourself? I'm sure webpages wouldn't change all that much over a month or so, so just update them yourself every month or so.

- a small/medium site is over 800 pages, it take some time,
- a site with most then, let's say 80%, content older than one month is dead,

PS: I have another, 5-6 reason less important,

best regards

[GJay]

on linux, if you have X running (which most web-servers won't...), then there are ways ('xwd' off the top of my head...) that will let you grab the contents of the screen. Using exec (or similar), you could launch a browser (opera and firefox at least will accept URLs as arguments, you can 'remote control' opera quite a lot, so you could leave that running and just send commands to it...) and then exec xwd to take the screenshot and save it to a file.

I'd be surprised if OS-X didn't have something similar built in, and there are probably ways to do it for windows- DirectX can probably do it.

[oesxyl]

Originally Posted by oesxyl

There is a windows solution, but I don't bookmark the site.

I find the link:

http://www.zubrag.com/scripts/websit...-generator.php

unfortunately, I can't use it.

best regards

[StupidRalph]

Originally Posted by GJay

on linux, if you have X running (which most web-servers won't...), then there are ways ('xwd' off the top of my head...) that will let you grab the contents of the screen. Using exec (or similar), you could launch a browser (opera and firefox at least will accept URLs as arguments, you can 'remote control' opera quite a lot, so you could leave that running and just send commands to it...) and then exec xwd to take the screenshot and save it to a file.

I'd be surprised if OS-X didn't have something similar built in, and there are probably ways to do it for windows- DirectX can probably do it.

http://www.codingforums.com/showthread.php?t=79721
Here is an example of how you can use it with xwd. There was another thread at the top of the year that had some interesting responses as well.

Also, I thought there was a php function (windows only) that would grab a screenshot of a URL that came out in PHP5. I'm pretty positive I've read this on the php.net site. I'll be double checking.

[chump2877]

Also, I thought there was a php function (windows only) that would grab a screenshot of a URL that came out in PHP5. I'm pretty positive I've read this on the php.net site. I'll be double checking.

I think you are talking about this: imagegrabscreen or imagegrabwindow

But it appears to only capture the current screen or window...

[chump2877]

Well, I'm not using my own server in this instance, so my options are limited here, apparently...

I basically did the following, using the online websnapr service (the code might not be perfect since I extracted the relevant code for this post -- I'll let you guys test it for your own use):

HTML

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang=en>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="page_content">
<a onclick='window.open(this.href);return false;' onmouseover='showThumb(this.href,event);' onmouseout='hideThumb();' href='http://www.yoursite.com'>www.yoursite.com</a>
</div>
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>

CSS (styles.css)

 
#page_content
{
 position:relative;
}
#thumbnail
{
 position:absolute;
}

Javascript (javascript.js)

 
// Global variables
var linksources = new Array(
 ['http://images.websnapr.com/?size=s&url=',202,152],
 ['http://thumbnails.alexa.com/image_server.cgi?size=small&url=',160,120],
 ['http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=',160,120]
);
var linksource = 0;
 
// Functions
function showThumb(url,e)
{ 
 if (!e) e = window.event;
 if (e.pageX || e.pageY)
 {
  var x = e.pageX;
  var y = e.pageY;
 }
 else
 {
  var x = e.clientX + getScrollWidth();
  var y = e.clientY + getScrollHeight();
 }  
 if (!document.getElementById('thumbnail'))
 {
  var thumb = document.createElement("img"); 
  thumb.id = "thumbnail";
  document.getElementById('page_content').appendChild(thumb);
 }
 var previewImage = document.getElementById('thumbnail');
 previewImage.src = linksources[linksource][0] + encodeURI(url);
 previewImage.style.width = linksources[linksource][1] + "px";
 previewImage.style.height = linksources[linksource][2] + "px";
 previewImage.style.top = (y + 2) + "px";
 previewImage.style.left = (x + 10) + "px";
 previewImage.style.border = "1px solid #000";
}
function getScrollWidth()
{
 if (document.body.scrollLeft)
  return document.body.scrollLeft
 else if (document.documentElement.scrollLeft)
  return document.documentElement.scrollLeft;
 else 
  return 0;
} 
function getScrollHeight()
{ 
 if (document.body.scrollTop)
  return document.body.scrollTop
 else if (document.documentElement.scrollTop)
  return document.documentElement.scrollTop;
 else 
  return 0; 
}
function hideThumb()
{
 document.getElementById('page_content').removeChild(document.getElementById('thumbnail'));
}

[abduraooft]

Sorry, I get

linksources is not defined
[Break on this error] previewImage.src = linksources[linksource][0] + encodeURI(url);

in my firebug on mouseover. what should be the initial value for this?

[chump2877]

I forgot to add the following code to the JS earlier...it's there now:

 
// Global variables
var linksources = new Array(
['http://images.websnapr.com/?size=s&url=',202,152],
['http://thumbnails.alexa.com/image_server.cgi?size=small&url=',160,120],
['http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=',160,120]
);
var linksource = 0;

[ChaseC]

You can use www.w3snapshot.com for generating website snapshots. It is an online tool. You use this in blogs, directories and other places. w3snapshot comes with integration tool.

[george2177]

HI
I have tested a lot of tools a site sites thumbnail generators to use with a pligg (digg style sms) site but I think that http://www.megasnaps.com is the best for this use. His free web site to image page, create a image of the whole html page, and offers a cropped options too to be downloaded.

The website thumbnails generator service are a good option for any type of web sites, offers a full page and custom sizes for the cheaper price tha I have found. I do a great instalation with 'facebox' (jquery), by clicking on a small image it open a larger one 'facebook style' image with a full size snapshot looks great!.

hope it helps.