View Full Version : Turn a div into an image

02-22-2012, 12:15 PM
Im not sure if this is possible/if its a php question, or javascript, or something completely different, but im wondering if i could turn a div into an image what i could then manipulate.

Ideally i want it to work something like
1) Link is pressed
2) div (#page) is turned into an image
3) Javascript does some things to the image e.g. shrink, rotate, skew etc

Is anything like this remotely possible?

02-22-2012, 12:37 PM
Kind of, but it's not really that easy. First, JavaScript doesn't have the ability to "screenshot" an element on the page and turn it into an image. You would have to do this with some plugin or else send the contents of the div to your server and have a script determine what it's supposed to look like. You could then store the image on your server and send it back to the browser. PHP, for example, can generate images using the GD library.

Once you have an image, you can do some stuff with JS and CSS. Resizing an image fairly easily...just set the height and width attributes. You can also use CSS to apply some basic transforms to an image, though it's not going to be cross-browser. Here's a neat page on using webkit-transform (http://24ways.org/2009/going-nuts-with-css-transitions).

02-22-2012, 03:53 PM
I found html2canvas which gets a image, however currently itt just loads it directly into the body of the page, so i need to go through it and try and manipulate it a bit, however theres 2k+ lines of code so it might take me a while haha :p

02-22-2012, 04:22 PM
You can do some neat things with the new canvas element, just remember that older browsers don't have native support for this.

02-22-2012, 10:04 PM
Ooh, ill look into that thanks :). It's not important if older browsers don't support it it's just for some cool transitions for changing pages :p