Редактирование картинки / inplace "Перемещение" (а-ля редактирования профиля Facebook) - PullRequest
4 голосов
/ 23 мая 2011

Как Facebook делает "перемещение" по изображениям профиля?

Чтобы увидеть, о чем я говорю, перейдите: http://www.facebook.com/editprofile.php?sk=picture -> Изменить эскиз -> Обратите внимание, что выможно переместить миниатюру изображения примерно.

Они называют его "ProfilePicSquareEditor" (их исходный код трудно получить)

Ответы [ 2 ]

4 голосов
/ 23 мая 2011

Это не совсем то, что использует Facebook, но это очень хорошо помогает http://odyniec.net/projects/imgareaselect/

В настоящее время я использую его в нескольких проектах.

0 голосов
/ 23 мая 2011

Очевидно, что есть куча javascript для управления изменением размера перетаскивания окна обрезки, которое может быть немного сложным (или, по крайней мере, утомительным), если вы применяете определенное соотношение сторон (или диапазон), но насколькоЧто касается HTML, то это просто черный фоновый div с полным изображением, расположенным поверх него в opacity: .5 (это создало затемненное фоновое изображение), затем еще одна копия того же изображения, расположенная в position: absolute div (который находится снаружиэтого первого div), поэтому он корректно совпадает с первым изображением.Обработчик, который реагирует на события перетаскивания маркеров изменения размера, постоянно обновляет свойства top, left, width и height абсолютно позиционированного div («окна обрезки»), а также topи left свойств (в отрицательном направлении) изображения «переднего плана» внутри него, чтобы оно было выровнено с фоновым изображением.

JavaScript также будет отслеживать положение каждого угла, поэтому, когда пользовательПринимая изменения, эти точки могут быть переведены в пиксельные координаты (с учетом любого масштабирования) и переданы в любую библиотеку обработки изображений, находящуюся на серверной стороне.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...