I don't know if you can actually modify the image, but you could do things like change image width and height properties, or use css in ways to show manipulated image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <style> body { margin: 0 } </style> <body> <script src="http://particletree.com/scripts/prototype.js" type="text/javascript"></script> <div id="image_container" > <img src="http://www.google.com/intl/en_ALL/images/logo.gif" id="image" style=" position:absolute; " /> </div> <input type="button" onclick="resize1()" value="double size" style="position:absolute; top: 260px;" /> <input type="button" onclick="resize2()" value="morph right side" style="position:absolute; top: 300px;" /> </body>

<script> var i = $('image'); var oldWidth = i.width ; var oldHeight = i.height ;

function resize1() { i.width = oldWidth + oldWidth ; i.height = oldHeight + oldHeight ; i.style.clip = 'auto'; if ($('image2')) {$('image2').remove();} }

function resize2() { i.width = oldWidth; i.height = oldHeight; i.setStyle( { clip: 'rect(0px 138px 110px 0px)'} ); new Insertion.Bottom( 'image_container', '<img src="http://www.google.com/intl/en_ALL/images/logo.gif" id="image2" style=" position:absolute; " /> '); i2 = $('image2'); i2.setStyle( { clip: 'rect(0px 552px 110px 276px)' , left: '-138px' } ); i2.width = oldWidth + oldWidth ; i2.height = oldHeight; } </script> </html>

You could use overflow:hidden instead of clipping. Then find the math formulas for the resizing, attach drag handler to image edges, overlay semi-transparent layers to emulate effects. To save it in the end though the user has to take a screenshot or your backend script has to process it for the user.