WEB Automatically convert a larger-than-screen html page into a single highres image?

Discussion in 'OT Technology' started by Ichinichi, Feb 1, 2010.

  1. Ichinichi

    Ichinichi take dat blue pill

    Joined:
    May 8, 2001
    Messages:
    12,528
    Likes Received:
    81
    Hi OT Webgurus! :bowdown:

    Given user input, my users expect an html page with <font color> and <span> tags that often does not fit on a regular screen.

    I already have a cgi script that generates the html that can be viewed with a web browser by scrolling, but my users need a way to save the whole page as a single highdef image for postprocessing.

    How is this task typically addressed via command line??

    Thank you! :wavey:
     
  2. o2

    o2 Witty Title Here OT Supporter

    Joined:
    Oct 4, 2005
    Messages:
    16,099
    Likes Received:
    11
    Location:
    Toronto
    wut?
     
  3. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,297
    Likes Received:
    59
    Location:
    Tasmania
    No gym for home?
     
  4. Major Tom

    Major Tom OT Supporter

    Joined:
    Mar 10, 2003
    Messages:
    5,683
    Likes Received:
    0
    Location:
    England
  5. Ricky

    Ricky █▄ █▄█ █▄ ▀█▄

    Joined:
    Jun 17, 2005
    Messages:
    38,767
    Likes Received:
    6
    so basically you want a large image of the screen (including the stuff you see at the bottom of the page when you scroll down)
     
  6. Ricky

    Ricky █▄ █▄█ █▄ ▀█▄

    Joined:
    Jun 17, 2005
    Messages:
    38,767
    Likes Received:
    6
  7. Ichinichi

    Ichinichi take dat blue pill

    Joined:
    May 8, 2001
    Messages:
    12,528
    Likes Received:
    81
    exactly. but ideally i'd have a link to the captured png, what i think you're referring to as "real-time". users are biologists - not the most computer savvy, savvy?
     
  8. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,297
    Likes Received:
    59
    Location:
    Tasmania
    Sounds like what you want is a script that screenshots a remote URL then links to a hosted version of that image, on demand?
     
  9. pharmokan

    pharmokan OT Supporter

    Joined:
    Oct 18, 2002
    Messages:
    102,069
    Likes Received:
    392
    Location:
    L.A.
    no screen for home, but is 800 like 1024 pixels
     
  10. Ichinichi

    Ichinichi take dat blue pill

    Joined:
    May 8, 2001
    Messages:
    12,528
    Likes Received:
    81
    well, everything would be local to my server. the cgi script would just create the html file, call the converter to create the screengrab-like image output and then return both the html version and a link to the image version to the user.
     
  11. Ichinichi

    Ichinichi take dat blue pill

    Joined:
    May 8, 2001
    Messages:
    12,528
    Likes Received:
    81
    sorry my question was too technical for you. we're working on it already. kindly redirect your faggot trolling to the off-topic forum.
     
  12. Ichinichi

    Ichinichi take dat blue pill

    Joined:
    May 8, 2001
    Messages:
    12,528
    Likes Received:
    81
    just tried it. screengrab output is EXACTLY what i want, but without requiring my users to install a separate plug-in.
     
  13. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,297
    Likes Received:
    59
    Location:
    Tasmania
    Yeah, what I said, is what you're after.

    You need a script that sits on the server, and on demand (when clicking a link, or whatever) it screengrabs the HTML and offers up a hosted image.

    PHP + GD would do it.. though i'm sure there's better ways than that, I just don't know them.
     
  14. TurkeyChicken

    TurkeyChicken New Member

    Joined:
    Jun 26, 2003
    Messages:
    42,913
    Likes Received:
    0
    Location:
    Albuquerque, NM
    Why does your client need real-time screen grabs of their website?
     
  15. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,486
    Likes Received:
    69
    Location:
    Sparkopolis
  16. o2

    o2 Witty Title Here OT Supporter

    Joined:
    Oct 4, 2005
    Messages:
    16,099
    Likes Received:
    11
    Location:
    Toronto
    This is the stupidest idea I ever heard. Why dont you have it print the website, ON DEMAND, and mail the print outs to people.
     
  17. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,486
    Likes Received:
    69
    Location:
    Sparkopolis
    you can save everything in canvas as an image..

    if you copy and paste this code into an html file then open it in new-ish chrome, firefox, opera, it'll create an image then display it

    Code:
    <!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <html>
    <head>
    	<title><!-- Your Title --></title>
    	<style type="text/css">
    		/* Make HTML 5 elements display block-level for consistent styling */
    		canvas, footer, header, nav { 
    			display: block; 
    		}
    	</style>
    	<script type="text/javascript">
    		window.onload = function() {
    			var canvas = document.getElementById("canvas");
    			var context = canvas.getContext("2d");
    			context.fillStyle = "green";
    			context.fillRect(160, 20, 100, 100);
    			context.fillStyle = "red";
    			context.font = "bold 30px sans-serif";
    			context.fillText("This is a", 20, 60);
    			context.fillText("programmatically-", 20, 100);
    			context.fillText("created image.", 20, 140);
    			document.getElementById("main").innerHTML = "<img src='" + canvas.toDataURL("image/png") + "' />";
    		}
    	</script>
    </head>
    <body>
    	<header>
    		<!-- ... -->
    	</header>
    
    	<nav>
    		<!-- ... -->
    	</nav>
    	
    	<div id="main">
    		<canvas id="canvas"></canvas>
    	</div>
    	
    	<footer id="nav">
    		<!-- ... -->
    	</footer>
    </body>	
    </html>
    
    
    http://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas-todataurl
     
    Last edited: Feb 5, 2010

Share This Page