php - 编辑图片/就地“移动”（类似于 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: absolutediv 中（位于第一个 div 之外），因此它排列正确使用第一张图像。响应调整大小句柄的拖动事件的处理程序不断更新绝对定位的 div（“裁剪窗口”）的top、和属性left，以及widthheighttopleft它内部的“前景”图像的属性（到负片）以使其与背景图像保持对齐。

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