How can I manipulate an image on a website?

I am creating a website where a user is able to upload an image and then rotate or move it around on a background. Th开发者_如何学Goe final position of the image is then recorded in some way (bitmap?) and sent with some form results.

I'm a bit lost as to how to do this, the website is built using asp.net, I presume what I am trying to do could be done in Silverlight, javascript, flash, flex or maybe html5?

If anyone knows the best way of doing this or can link to a resource or tutorial I would be grateful. I would prefer not to do it in flash or flex as I am unfamiliar with them and do not have the tools installed to edit them. I would prefer Silverlight or javascript solution.

Thanks, nl

I'd recommend doing this in javascript. At a high level, you just need an element on the page to contain your image, some basic code to allow the user to drag the container around (much of this is available prebuilt through frameworks like mootools), and some logic to save the final element position after the user is done positioning it.

I'm not sure what you mean by saving it as a bitmap, but I'd recommend just saving the element's x and y offset coordinates from the top-left corner of its container. Again, there are readily available frameworks that will do pretty much all of the positioning computations for you.

Here is an example site that implements draggable images with persistent state between sessions: http://webcomix.no-ip.org

You can do this with html5.

Have a look at canvas tag along with this javascript.

where logo is the image, context is the canvas tag context.

    context.clearRect(0, 0, width, height);
    context.setTransform(_m11, _m12, _m21, _m22, _dx, _dy);
    context.drawImage(logo, 0, 0);

Have a look at this example - http://jsfiddle.net/prowla/Kj3UL/ best viewed in Chrome to use the new Range input types, if in FF or IE, change values in text boxes to manipulate the image.

You could save the 6 parameters of the setTransform function to save the state of the image manipulation.