Как Facebook кодирует свой инструмент обрезки? - PullRequest
Новая
       6

Как Facebook кодирует свой инструмент обрезки?

1 голос
/ 06 апреля 2010

Я спрашиваю об этом, потому что в настоящее время я пытаюсь отработать свою собственную технику, и когда вы начинаете это, есть огромные стратегические проблемы для всего сайта.Из них:

  1. Использование jCrop и rMagick требует огромного количества обработки (к которой я присоединился).

  2. Потому чтоУ меня есть фон, я должен с помощью ajax разработать функцию, которая автоматически обновляется каждые пять секунд, чтобы проверить, когда выполняется фоновая обработка.

Кто-нибудь достиг этого на своих сайтах?Если да, то с какими творческими приемами вы столкнулись, чтобы ускорить процесс обработки и сделать пользователей счастливыми?

1 Ответ

3 голосов
/ 06 апреля 2010

Я не знаю, как это делает Facebook, но я бы использовал jquery-ui resizeable() и draggable(). Вы можете установить изображение в div с точной шириной изображения и иметь второй перетаскиваемый / изменяемый размер div, расположенный поверх изображения (используя более высокий z-индекс). Таким образом, у вас есть полупрозрачная область обрезки, которую пользователь может перемещать и регулировать. Вы можете установить оба метода на родительский div, чтобы они не могли перетаскивать или изменять размеры за пределы изображения.

Когда они готовы к обрезке, координаты каждого угла могут быть отправлены через ajax на сервер. Затем сервер может запустить любой инструмент для обрезки изображений (в php я бы использовал gmagic -> cropimage()), и задача выполнена.

Сложная задача - решить, как показать пользователю готовый продукт. Я бы определенно рассмотрел вопрос о сохранении нового обрезанного изображения в папке tmp на случай, если они передумают. Но если вы сделаете это, вы можете попросить ajax обновить src элемента изображения, чтобы они могли видеть, что они сделали. Если им это нравится, они нажимают «сохранить изменения», и через ajax отправляется еще один запрос на замену оригинала на тот, что находится в папке tmp.

Antoher, довольно неряшливо, вариант просто использовать pxlr. У них есть API разработчика , который позволяет вызывать инструменты своего сайта через JavaScript. Вы можете настроить функции, которые видит пользователь, и сохранить их в значении «reffer» на своем сервере. Не уверен, как настроить безопасность для этого, но я уверен, что сайт входит в него.

...