编辑图片/就地“移动” （类似于 Facebook 个人资料图片编辑）
Facebook 如何对个人资料图片进行“移动”？
要了解我在说什么，请转到：http://www.facebook.com/ editprofile.php?sk=图片 -->编辑缩略图 -->请注意，您可以移动缩略图。
他们称之为“ProfilePicSquareEditor”（他们的源代码很难获得）
How does facebook do inplace "moving" about of profile pictures?
To see what I'm talking about, goto: http://www.facebook.com/editprofile.php?sk=picture --> Edit Thumbnail --> Notice that you can move the thumbnail picture about.
They're calling it "ProfilePicSquareEditor" (their source code is hard to get at)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这并不完全是 Facebook 使用的方法，但它的效果非常好 http://odyniec.net/projects/imgareaselect/
我目前正在几个项目中使用它。
This is not exactly what Facebook uses but it does the trick very well http://odyniec.net/projects/imgareaselect/
I'm currently using it in a couple of projects.
显然，有一堆 JavaScript 来控制裁剪窗口的拖动调整大小，如果您强制执行特定的宽高比（或范围），这可能会变得有点复杂（或至少乏味），但就 HTML 而言，它只是一个黑色背景 div，完整图像位于
opacity: .5之上（这创建了变暗的背景图像），然后位于中的同一图像的另一个副本位置：绝对div（位于第一个 div 之外），因此它与第一个图像正确对齐。响应调整大小手柄拖动事件的处理程序不断更新top、left、width和height绝对定位的 div（“裁剪窗口”）的属性，以及其中“前景”图像的top和left属性（进入负片）以保持它与背景图像对齐。JavaScript 还会跟踪每个角的位置，因此当用户接受更改时，这些点可以转换为像素坐标（考虑到任何缩放）并馈送到后端的任何图像处理库。
Obviously there's a bunch of javascript to control the drag resizing of the crop window, which can get a little complex (or at least tedious) if you're enforcing a certain aspect ratio (or range), but as far as the HTML is concerned, it's simply a black background div with the full image sitting on top of that at
opacity: .5(this created the darkened background image), then another copy of the same image sitting in anposition: absolutediv (which is outside of that first div) so it lines up correctly with the first image. A handler that responds to the drag events of the resize handles continuously updates thetop,left,widthandheightproperties of the absolutely positioned div (the 'crop window'), and also thetopandleftproperties (into the negative) of the 'foreground' image inside it to keep it aligned with the background image.The javascript would also keep track of the position of each corner, so when the user accepts the changes, those points can be translated into pixel coordinates (taking any scaling into consideration) and fed to whatever image processing library is on the backend.