【问题标题】:How does Facebook codes their Cropping tool?Facebook 如何编码他们的裁剪工具?
【发布时间】:2010-04-06 16:25:16
【问题描述】:

我问这个是因为我目前正在尝试制定自己的技术,并且当您开始此操作时,整个网站都会遇到巨大的战略问题。其中有:

  1. 使用 jCrop 和 rMagick,它占用了大量的处理(我有背景)。

  2. 因为我有后台,我必须通过 ajax 开发一个功能,每五秒自动更新一次,以检查后台何时完成。

有没有人用他们的网站做到这一点?如果是这样,您遇到了哪些创造性的技术来保持处理流程的流畅并让用户满意?

【问题讨论】:

标签: jquery ruby-on-rails crop


【解决方案1】:

我不知道 facebook 是如何做到的,但我会使用 jquery-ui 的 resizeable()draggable() 方法。您可以将图像设置为图像的确切宽度的 div,并在图像顶部放置第二个可拖动/可调整大小的 div(使用更高的 z-index)。这样,您就有了一个半透明的裁剪区域,用户可以四处移动和调整。您可以将这两种方法都设置为限制在父 div 中,因此它们不能拖动或调整超出图像的大小。

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

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

Antoher,有点低俗,选项是只使用 pxlr。他们有一个developer API,允许通过javascript调用他们网站的工具。您可以自定义用户看到的功能并将其保存到“reffer”,即返回您的服务器。不知道如何为此设置安全性,但我确信该网站会进入它。

【讨论】:

    猜你喜欢
    • 2014-01-21
    • 1970-01-01
    • 2018-08-16
    • 1970-01-01
    • 2016-02-21
    • 1970-01-01
    • 1970-01-01
    • 2011-11-24
    • 1970-01-01
    相关资源
    最近更新 更多