Export DIV to JPG?

February 3, 2008 11:48 PM

WebDev-2.0Filter: Using client side technologies (i.e. Javascript, ActiveX, Java... JS is preferred) is it possible to generate an image file (PNG or JPG, or even PDF) from a DIV tag on the page?

I have a little web page where people can choose a bunch of options, click on, click off areas on a map etc... Is it possible, using only client-side technologies, to generate an image that represents the content in the DIV (A bunch of PNG images layered on top of each other and some text/controls)?

Actually, all that is important to have in the image are a bunch of (alpha) PNG files layered on top of each other. Am I missing something simple here? Is there a magic JS library I can load? Am I not thinking about this little roadblock in the right way?

The application is written for IE7 for now so anything that works in there is good. Extra points for browser agnostic or solutions across multiple platforms.

MefiMail/Email me if you want more info... Thanks in advance!

posted by puddpunk to computers & internet (11 comments total)

The answer to your question on the technical feasibility is yes. It's backed up more than once...

As for how to do it -- that's a more complicated story than an AskMe thread can cover, unless someone knows of a sweet library out there that'll do what you want. Unfortunately I don't...
posted by twiggy at 12:45 AM on February 4

I'm going to say a pretty confident "no" with generating an image of type PNG, JPG or PDF.

You could definitely do an SVG client-side, because it's an XML-based format, but IE isn't going to display it.

But if you really just need to show a number of images, at different X-Y positions and Z-indexes, that shouldn't be too difficult at all with CSS positioning.

I think we need more detail, or a link.
posted by AmbroseChapel at 12:47 AM on February 4

Unfortunately both those links are a:followed for me, twiggy. When I looked at them I didn't find information enough to help me but I figured that the posts were over 4 years old and perhaps something had come along by then... Cheers mate.
posted by puddpunk at 12:49 AM on February 4

Actually, I'd forgotten about this insane thing. If you're prepared to generate a 1x1 pixel DIV for each pixel, you can do anything you want.
posted by AmbroseChapel at 12:51 AM on February 4

In rereading your post, I'm wondering why having the bunch of images you want to display can't just be stored server-side, then placed into DIVs that are absolutely positioned over your main DIV, and set to display: none; visibility: hidden;

Then, when checkboxes are checked - set display: block; visibility: visible;

If you need to reposition them based on other settings, you can set the top: and left: parameters for that as AmbroseChapel says above.

The z-index AmbroseChapel mentions, in case you're not familiar, is just the "depth" of layering...

Perhaps we're both not getting the whole picture of what you're trying to do, though.
posted by twiggy at 12:56 AM on February 4

AmbroseChapel: It's a map and a bunch of check boxes. The checkboxes show/hide semi-transparent "layers" on top of the map. Both the map and the layers exist as PNG files with alpha channels.

This is fine. It works and it's fast. I can hide/show layers with the tickboxes.

The client has just asked for a way to export a file from it, with the selected layers, to give to clients and I'm stuck... Just wondering if anyone had invented this particular wheel before.

Note: this is a client side application hosted on their proprietary CMS - I can't run any server-side code on their servers.

My current idea is to pop up another window with the selected layers on it only then invoke the browsers print function and get them to get a PDF printer or something. Not exactly ideal but I think it'll get the job done.

Anybody got any ideas with ActiveX or Java?
posted by puddpunk at 1:00 AM on February 4

The client has just asked for a way to export a file from it, with the selected layers, to give to clients and I'm stuck...
Tell them to install a PDF Printer, or install Godwin Screen Printer on their PC (Set up to save screen grabs as PNG Files to the desktop)

Low tech, but it'll work.
posted by seanyboy at 1:13 AM on February 4

If its just a bunch of layered images you can layer them into a single image with php via gd or image magick.

Just POST the checkboxes to a php script so it knows which layers to load and have it spit out a single graphic.

Why does it have to be client-side? If you want it to 'appear' client-side you could use ajax.
posted by missmagenta at 2:10 AM on February 4

take a look at this page at libpng.org - it includes a bunch of Java/ActiveX (among others) tools that claim to read and write PNG graphics, as well as a pure JavaScript PNG writer (no read though)... it also looks like there may be an ActiveX component for ImageMagick, which should do the job if it actually exists... so yeah, if your client wants to pay enough it looks like it shouldn't be impossible to put something together to do the job... but I suspect the reason there's no ready-made client side solution for this is most people reckon client side is the wrong place to do it...
posted by russm at 2:11 AM on February 4

Windows has the PrintScreen button that will do screen capture to the clipboard. Just paste into Paint. OSX has "grab" built in. Both of these are simple and you probably already have them.
posted by roue at 7:36 AM on February 4

The only way to do it purely client-side with Java would be via signed applets, and that requires significant money and effort and results in a poor user experience. ActiveX might work, but then you're IE + windows only.

It sounds like there might be some options for generating images on the client via JS (and definitely via a Java applet). Every CMS in the universe has some way of posting files as resources. So one option is to composite the images on the client and post the resulting bytes to the server via whatever the CMS file posting method is. Then the file will be available at some URL from the server, which you can then provide to the end user.

IMO, you're better off taking the time and effort to negotiate the ability to develop and deploy a server-side plugin to their CMS. Otherwise anything you produce will be a brutal, fragile hack that will probably deliver a poor user experience.
posted by xthlc at 8:33 AM on February 4