如何操作网站上的图像？

我正在创建一个网站，用户可以上传图片，然后在背景上旋转或移动它。然后以某种方式记录图像的最终位置（位图？）并发送一些表单结果。如何操作网站上的图像？

我有点失落，如何做到这一点，该网站是使用asp.net构建的，我推测我想要做的事情可以在Silverlight，JavaScript，Flash，Flex或HTML5中完成？

如果有人知道这样做的最佳方式或可以链接到资源或教程，我将不胜感激。我不想在Flash或Flex中执行此操作，因为我不熟悉它们，也没有安装编辑它们的工具。我更喜欢Silverlight或JavaScript解决方案。

感谢， NL

2011-03-19 nedlogan

看看http://raphaeljs.com/。 – pimvdb 2011-03-19 11:15:11

我建议在JavaScript这样做。在高层次上，你只需要在页面上包含一个元素来包含你的图像，一些基本的代码允许用户拖动容器（大部分可以通过像mootools这样的框架预先构建），还有一些逻辑来保存最终的元素位置在用户完成定位之后。

我不确定你的意思是将它保存为位图，但我建议只保存它的容器左上角的元素的x和y偏移坐标。再次，有可用的框架将为您执行几乎所有的定位计算。

下面是一个例子网站，实现会话间带有持久化状态可拖动图片：http://webcomix.no-ip.org

2011-03-19 11:22:33 aroth

当我说保存为位图时，我的意思是图像在背景上结束的地方，我需要知道该位置以便重现它。记录xy偏移量是否更好，更准确？ – nedlogan 2011-03-19 11:43:57

是的，如果您记录相对于背景图像左上角的x和y偏移量，则可以使用偏移量，背景图像和前景图像来重现用户创建的任何状态。 – aroth 2011-03-19 13:13:18

你可以用HTML5做到这一点。

看看画布标签以及此javascript。

其中logo是图像，context是画布标签上下文。

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

看一看这个例子 - http://jsfiddle.net/prowla/Kj3UL/在Chrome浏览最好使用新的量程输入类型，如果在FF或IE浏览器，在文本框变化值来处理图像。

您可以保存setTransform函数的6个参数来保存图像操作的状态。

2011-03-21 11:18:53

谢谢，我会考虑一个。 – nedlogan 2011-03-22 19:42:16

回答