Facebook如何编码他们的裁剪工具?

我不知道Facebook是如何做到的,但我会使用jquery用户界面 resizeable() 和 draggable() 方法。您可以将图像设置为图像的精确宽度的DIV,并在图像顶部放置第二个可拖动/可调整大小的DIV(使用更高的Z索引)。这样,您就有了一个半透明的裁剪区域,用户可以四处移动和调整。可以将这两种方法都设置为约束到父DIV,这样它们就不能在图像之外进行拖动或调整大小。

当它们准备好裁剪时,每个角的坐标可以通过Ajax发送到服务器。然后,服务器可以运行您拥有的任何图像裁剪器(在PHP中,我将使用 gmagic -> cropimage() )任务完成了。

棘手的部分是决定如何向用户展示成品。我会明确考虑将新裁剪的图像存储在tmp文件夹中,以防他们改变主意。但是,如果这样做,可以让Ajax更新image元素的src,这样他们就可以看到自己做了什么。如果他们喜欢,他们点击“保存更改”,然后通过Ajax发送另一个请求,用tmp文件夹中的请求替换原始请求。

安托弗,有点卑鄙,选择只是使用pxlr。他们有一个 developer API 这允许通过javascript调用他们站点的工具。您可以自定义用户看到的功能,并将其保存到“reffer”(返回到服务器)中。不知道该如何设置安全性,但我确信该站点会进入其中。