如何操作网站上的图像？

Question

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

我有点迷失如何做到这一点，网站是使用asp.net构建的，我认为我想做的事情可以在Silverlight，javascript，flash，flex或者html5中完成？

如果有人知道这样做的最佳方式，或者可以链接到资源或教程，我将不胜感激。我不想在flash或flex中这样做，因为我不熟悉它们并且没有安装工具来编辑它们。我更喜欢Silverlight或javascript解决方案。

谢谢， NL

Answer 1

我建议在javascript中执行此操作。在较高的层次上，您只需要在页面上包含一个元素来包含您的图像，一些基本代码允许用户拖动容器（其中大部分是通过mootools之类的框架预先构建的），以及一些逻辑在用户完成定位后保存最终元素位置。

我不确定你将它保存为位图是什么意思，但我建议只从容器的左上角保存元素的x和y偏移坐标。同样，有很多可用的框架可以为你完成所有的定位计算。

以下是在会话之间实现具有持久状态的可拖动图像的示例网站：http://webcomix.no-ip.org

Answer 2

您可以使用html5执行此操作。

看一下canvas标签以及这个javascript。

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

    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中最佳查看以使用新的Range输入类型，如果在FF或IE中，则更改文本框中的值以操作图像。

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