<cfsilence>

Converting HTML To An Image With CF/Java

Posted At : April 4, 2008 2:06 PM | Posted By : todd sharp
Related Categories:

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:

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?

Comments (18) |

Print |

Send |

Code |

del.icio.us |

Linking Blogs | 4287 Views

Comments

[Add Comment]

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 | 4/4/08 2:39 PM

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 | 4/4/08 3:11 PM

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 | 4/4/08 3:43 PM

Yes, I'd like to see how exactly you're doing that.

# Posted By Brian Swartzfager | 4/4/08 4:05 PM

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 | 4/4/08 4:05 PM

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 | 4/4/08 4:16 PM

It's not IE whatsoever...

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

# Posted By todd sharp | 4/4/08 4:19 PM

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 | 4/4/08 4:26 PM

@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 | 4/4/08 4:45 PM

@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 | 4/4/08 4:57 PM

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 | 4/4/08 6:26 PM

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 | 4/4/08 6:46 PM

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

# Posted By todd sharp | 4/4/08 8:04 PM

We use Webthumb:

http://webthumb.bluga.net/home

Works quite well! Cheap too..

# Posted By Evert | 4/9/08 4:33 PM

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 | 6/12/08 12:54 PM

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 | 6/12/08 1:24 PM

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 | 12/7/08 1:57 PM

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 | 12/7/08 3:01 PM

[Add Comment]