编辑图片/就地“移动”(类似Facebook个人资料图片编辑)

Question

facebook是如何“移动”头像的？

要查看我正在讨论的内容，请转到：http://www.facebook.com/editprofile.php?sk=picture -->编辑缩略图-->请注意，您可以移动缩略图。

他们称之为"ProfilePicSquareEditor“(他们的源代码很难获得)

Answer 1

这并不是Facebook所使用的，但它做得很好http://odyniec.net/projects/imgareaselect/

我目前在几个项目中使用它。

Answer 2

显然，有一堆javascript来控制裁剪窗口拖动大小，如果你强制执行某个纵横比(或范围)，这可能会变得有点复杂(或者至少很繁琐)，但就HTML而言，它只是一个黑色背景div，完整图像位于opacity: .5的上面(这创建了变暗的背景图像)，然后同一图像的另一个副本位于position: absolute div (位于第一个div之外)中，这样它就可以正确地与第一个图像对齐。响应调整大小手柄的拖动事件的处理程序不断更新绝对定位的div (“裁剪窗口”)的top、left、width和height属性，以及其中的“前景”图像的top和left属性(变为负片)，以使其与背景图像对齐。

javascript还将跟踪每个角的位置，因此当用户接受更改时，这些点可以转换为像素坐标(考虑到任何缩放)，并馈送到后端的任何图像处理库。