【发布时间】：2011-08-31 05:54:38
【问题描述】：
facebook 如何对个人资料图片进行就地“移动”？
要查看我在说什么，请转到：http://www.facebook.com/editprofile.php?sk=picture --> 编辑缩略图 --> 请注意，您可以移动缩略图。
他们称它为“ProfilePicSquareEditor”（他们的源代码很难获得）
【问题讨论】：
标签： php jquery ajax facebook image-editing
【发布时间】：2011-08-31 05:54:38
【问题描述】：
这不完全是 Facebook 使用的，但它做得很好http://odyniec.net/projects/imgareaselect/
我目前在几个项目中使用它。
【讨论】：
显然有一堆 javascript 来控制裁剪窗口的拖动调整大小，如果您强制执行某个宽高比（或范围），这可能会变得有点复杂（或至少乏味），但就就 HTML 而言，它只是一个黑色背景 div，完整图像位于 opacity: .5 的顶部（这创建了变暗的背景图像），然后同一图像的另一个副本位于 position: absolute div 中（在外面的第一个 div ）所以它与第一个图像正确对齐。响应调整大小句柄的拖动事件的处理程序不断更新绝对定位的 div（“裁剪窗口”）的 top、left、width 和 height 属性，以及 top和left 内部“前景”图像的属性（放入负片）以使其与背景图像保持对齐。
javascript 还会跟踪每个角的位置，因此当用户接受更改时，这些点可以转换为像素坐标（考虑到任何缩放）并馈送到后端的任何图像处理库.
【讨论】：