编辑图片/就地“移动”例如Facebook个人资料图片编辑

问题描述

|| Facebook如何进行个人资料图片的“移动”？ 要查看我在说什么，请转到：http://www.facebook.com/editprofile.php?sk=picture->编辑缩略图->注意，您可以移动缩略图。 他们称之为\“ ProfilePicSquareEditor \”（很难获取其源代码）     

解决方法

这不完全是Facebook所使用的，但是它可以很好地完成窍门http://odyniec.net/projects/imgareaselect/ 我目前正在几个项目中使用它。     ,显然，有一堆JavaScript可以控制裁剪窗口的拖动大小调整，如果您要强制执行特定的宽高比（或范围），这可能会变得有些复杂（或至少很乏味），但是就HTML而言，它只是一个黑色背景div，整个图像位于

opacity: .5

上方（创建了深色的背景图像），然后是同一图像的另一个副本位于

position: absolute

div（位于div之外）第一个div），以便它与第一个图像正确对齐。响应调整大小手柄的拖动事件的处理程序会连续更新绝对定位的div的

top

，

left

，

width

和

height

属性（\“ crop window \”），以及updates2ѭ和

left

属性（变为负数）使其内的“前景”图像与背景图像对齐。 javascript还可以跟踪每个角的位置，因此，当用户接受更改时，可以将这些点转换为像素坐标（考虑任何缩放比例）并提供给后端的任何图像处理库。