Converting HTML To An Image With CF/Java

Posted By : todd sharp Posted At : April 4, 2008 1:06 PM Posted In:

18

I decided to mess around a bit with a new way to create screen captures. I know that Ray has one method for doing this, but I wanted something that would offer a little more control over the process, and could possibly work on versions of ColdFusion prior to 8. The end result of what I came up with is pretty slick I think, and it's pretty efficient as well. I'm stuck on one CF 8 dependency in the function itself (plus you'll need some method of writing the image out - but there are Open Source image packages out there). I think with some work I'll be able to overcome the internal dependency on CF 8 and make it work on prior versions. Here's how easy it is:

<cfset img = getScreenShot(srcURL="http://cfsilence.com", width=150, height=150) />
<cfimage action="writeToBrowser" source="#img#" />

Which produces:


You can also pass HTML directly to the method:

<cfsavecontent variable="someHTML">
<html>
<head>
</head>
<body>
    <div style="width:100%; height: 200px; border: 10px solid red; background:purple; color:white;">Hello World</div>
</body>
</html>
</cfsavecontent>

<cfset imgTwo = getScreenShot(html=someHtml) />
<cfimage action="writeToBrowser" source="#imgTwo#" />

Which produces:


I'm not quite ready to release the code - still have a bit of clean up to do on it. What do folks think? Is this useful?

6067 Views Send Print Comments (18)

Comments (18)

Subscribe to Comments Add Comment

Brian Hendel's Gravatar Cool Stuff! I am curious; what is the underlying implementation? I have yet to play with CF8's image tools. What actually renders HTML into image data?

-Brian

Posted by: Brian Hendel on: 4/4/08 2:39 PM

Todd Rafferty's Gravatar How accurate is it? webshot basically opens up a hidden ie control somewhere to do the snapshot. Just never cared for command line tools, but meh.

Posted by: Todd Rafferty on: 4/4/08 3:11 PM

Garrett Williams's Gravatar This would be really sweet to have! I have wanted this type of functionality for many clients and never. I have done a lot of work with the java itext library, but nothing like this. This would be so much more simple.

Please let me know when you are ready to release.

Posted by: Garrett Williams on: 4/4/08 3:43 PM

Brian Swartzfager's Gravatar Yes, I'd like to see how exactly you're doing that.

Posted by: Brian Swartzfager on: 4/4/08 4:05 PM

todd sharp's Gravatar The implementation is pure Java under the hood. All built in classes too, no need for a class loader or external libraries.

Posted by: todd sharp on: 4/4/08 4:05 PM

Danilo Celic's Gravatar Hey Todd,

I'd be very interested in checking out the code you use from Java to be able to invoke IE to do you bidding.

Can you take shots of the page beyond the size of the browser? That is, if the page scrolls, can you snap the entire page, or just the visible portion?

Posted by: Danilo Celic on: 4/4/08 4:16 PM

todd sharp's Gravatar It's not IE whatsoever...

Still working on it Danilo, but that is my plan....

Posted by: todd sharp on: 4/4/08 4:19 PM

Brian Hendel's Gravatar It sounds to me like he is using the equivalent of an offline web browser in java. Instead of the browser rendering HTML onto a canvas (screen), it renders it into some other memory variable that he encapsulates into a CF image object.

Very cool stuff.

-Brian

Posted by: Brian Hendel on: 4/4/08 4:26 PM

Todd Rafferty's Gravatar @Danilo, not sure if you were talking to me or Todd Sharp, but what I'm using is cfexecute kicking off webshot ( http://www.websitescreenshots.com/ ) which uses IE. Webshot only works on windows machine, of course.

Posted by: Todd Rafferty on: 4/4/08 4:45 PM

Danilo Celic's Gravatar @Todd Rafferty,

I guess I was talking to Todd Sharp. I've seen IE used to help with screenshots of web pages, so I assumed that that was what being done, invoking IE from within Java. I had started my post right after your original post, but got busy and didn't submit until later and so I missed the post about it being in pure Java.

@Todd Sharp,

If the rendering is acceptable, then that would be good for what I've been working on lately. I did notice that the snap shot you posted doesn't show your menu bar, is that due to the specific page you snapped, or due to the rendering within Java/CF?

Posted by: Danilo Celic on: 4/4/08 4:57 PM

todd sharp's Gravatar I'm not sure why the rendering is off a bit, as I said I'm still working out the details. I probably should have waited to post until I figured some of these bits out, but I thought it was cool so I was excited to show it. More to come.

Posted by: todd sharp on: 4/4/08 6:26 PM

Steve Bryant's Gravatar Very cool stuff! I would definitely find that useful (to the point that I would probably be willing to pay for it if I had to).

Posted by: Steve Bryant on: 4/4/08 6:46 PM

todd sharp's Gravatar That's the answer I was hoping for Steve ;)

Posted by: todd sharp on: 4/4/08 8:04 PM

Evert's Gravatar We use Webthumb:

http://webthumb.bluga.net/home

Works quite well! Cheap too..

Posted by: Evert on: 4/9/08 4:33 PM

Seth MacPherson's Gravatar We (my team) would really like to see the code you are using behind getScreenShot(). It looks like a very nice implementation of libraries we also use.

Posted by: Seth MacPherson on: 6/12/08 12:54 PM

todd sharp's Gravatar Hey Seth: check this post - the code is attached to the entry:

http://cfsilence.com/blog/client/index.cfm/2008/4/...

I was a bit dissapointed in the results when fetching remote content, but for simple html to image it seems to work good...In fact, it's what I use to generate the thumbnails on http://slidesix.com

PS - what's up with using Google suggest for your URL?

PSS - any plans on sharing your code/experiences with your approach to HTML-image with Java?

Posted by: todd sharp on: 6/12/08 1:24 PM

Dan Plesse's Gravatar My guess is you set the setSize method wrong. It should be:

<cfset container.setSize(contentWidth,contentHeight) />

But GREAT WORK! Dan

Posted by: Dan Plesse on: 12/7/08 1:57 PM

Dan Plesse's Gravatar Also use a while loop until 'ready'

<cfloop condition="#stormBase.getViewPortState("hello")# NEQ 'ready'">
<cfdump var="#stormBase.getViewPortState("hello")#"></br>
<cfset sleep(100) />
</cfloop>

Posted by: Dan Plesse on: 12/7/08 3:01 PM
Add Comment

  • Calendar

    << March 2010 >>
    Sun Mon Tue Wed Thu Fri Sat
     123456
    7 8 9 10 11 12 13
    14 15 16 17 18 19 20
    21 22 23 24 25 26 27
    28 29 30 31    

  • Subscribe

    • Enter your email address to subscribe to this blog.