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

Question

我问这个问题是因为我目前正在努力想出我自己的技术，当你开始的时候，整个网站都有巨大的战略障碍。其中包括：

1. 使用jCrop和rMagick，它占用了大量的处理(我已经对其进行了后台处理)。
2. 因为我有后台，所以我必须通过ajax开发一个特性，每5秒自动更新一次，以检查回植何时完成。

有人用他们的网站完成了这个任务吗？如果是这样的话，您遇到了哪些创造性的技术来保持处理的流线型和用户的快乐呢？

Answer 1

我不知道facebook是如何做到的，但我会使用jquery的resizeable()和draggable()方法。您可以将图像设置为图像的精确宽度的div，并将第二个可拖/可调整大小的div放置在图像的顶部(使用较高的z索引)。这样，你有一个半透明的作物面积，用户可以移动和调整。可以将这两个方法设置为受父div约束的方法，这样它们就不能在图像之外拖动或调整大小。

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

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

一个人，有点下流，选择只是使用pxlr。他们有一个开发者API，允许通过javascript调用站点的工具。您可以自定义用户所看到的特性，并将其保存到"reffer“，即返回到您的服务器。不知道该如何设置安全性，但我确信网站会进入它。