Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts

    Question how to create a snapshot of web page

    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.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #2
    Master Coder mlseim's Avatar
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,386
    Thanks
    8
    Thanked 1,077 Times in 1,068 Posts
    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.

  • #3
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by chump2877 View Post
    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.

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Location
    Canada, eh?
    Posts
    133
    Thanks
    2
    Thanked 3 Times in 3 Posts
    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.
    Bored? Might as well play Fantasian Kingdoms: http://www.fantasiankingdoms.com/

    Check out my JavaScript Image Project: http://codingforums.com/showthread.php?t=185231

  • #5
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Eternity Angel View Post
    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

  • #6
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    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.
    My thoughts on some things: http://codemeetsmusic.com
    And my scrapbook of cool things: http://gjones.tumblr.com

  • #7
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by oesxyl View Post
    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

  • #8
    Senior Coder
    Join Date
    Mar 2003
    Location
    Atlanta
    Posts
    1,037
    Thanks
    14
    Thanked 30 Times in 28 Posts
    Quote Originally Posted by GJay View Post
    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.
    URL Snapshot
    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.
    Most of my questions/posts are fairly straightforward and simple. I post long verbose messages in an attempt to be thorough.

  • #9
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    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...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #10
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    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
    Code:
     
    <!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)
    Code:
     
    #page_content
    {
     position:relative;
    }
    #thumbnail
    {
     position:absolute;
    }
    Javascript (javascript.js)
    Code:
     
    // 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'));
    }
    Last edited by chump2877; 12-31-2007 at 01:25 PM. Reason: forgot to include some JS code
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Sorry, I get
    Code:
    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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    I forgot to add the following code to the JS earlier...it's there now:

    Code:
     
    // 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;
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #13
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #14
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Cheaper alternative

    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.
    Last edited by george2177; 11-13-2011 at 12:30 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •