Пример работы jQuery UI + PHP и GD. Нанесение аппликаций на изображение

[ZiGR]

Вау! Мне понравилось.

[Ipatov_e]

Ребят, а карму-то за что минусовать? Первый пост, я вы без аргументов в минус сразу :( Напишите в чем не прав, чтоб в будущем не допускать ошибок

[tsmar]

«апликации» не вращаются

[Ipatov_e]

Для вращения элементов в браузере можно воспользоваться плагином JQuery UI Rotatable. Но я не стал описывать вращение элементов, поскольку с этим возникают проблемы в отображении и в высчитывании угла поворота(для передачи на сервер) в браузерах IE 7-8. Статья и так получилась большая и я подумал, что не стоит переполнять ее кодом. Я хочу написать по этому поводу отдельную статью, которая будет продолжением затронутой темы.

[akamajoris]

Давно над Джоли так не издевались.

[nulldef]

У Вас в html все аппликации имеют одинаковый id, что противоречит самой сути идентификаторов. Думаю, Вы просто неуследили.
А статья хорошая!

[Ipatov_e]

Спасибо за замечание. Да, действительно id у аппликаций, которые выводились на панели изначально, были одинаковые. Исправил.
Но это не влияло на работу скрипта, поскольку при клике по аппликации на панели, в рабочей области создается новая картинка уже с уникальным id.

[Rastishka]

Было бы круто добавить вращение и текстовые поля (спич баббл).
Картинки справа мне почему то хочется перетянуть как drag&drop, а они не тягаются.

[SoNTesT]

// отступ сверху до робочей области // отступ слева до робочей области

Конечно, это маловажно, но «робочей» мозолит глаза.

[Ipatov_e]

Спасибо, поправил

[Gromo]

Для коллажа изображений не хватает возможности Drag'n'Drop изображений с панели элементов, возможности обрезания изображения (довольно непростая задача по поддержке ресайза и кропа изображения, чтобы можно было откропить ресайзенное изображение и отресайзить уже кропнутое, при этом эффект обрезания изображения достигается overflow:hiden у контейнера, а само изображение позиционируется с отрицательными координатами).

Также в браузерах есть поддержка эффекта размывания изображения (к сожалению, с помощью JavaScript можно добиться только примерной схожести размывания), чёрно-белые фильтры, управление слоями (изображение на передний/задний фон, на слой выше/ниже), возможность поворота изображения (поворот можно осуществлять только для необрезанных изображений), добавление тени (не поддерживается в IE для повёрнутого изображения); добавление блоков текста с настраиваемым фоном, прозрачностью, WYSIWYG-редактором и ещё много другого.

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

[Ipatov_e]

Я несколько раз упомянул в статье, что описываю только часть работы с коллажем, а именно «Нанесение аппликаций на изображение».
Как Вы и сами верно заметили, создание всего функционала коллажа довольно непростая задача, поэтому я решил разбить описание на несколько статей. А эта статья «пилотная», так сказать, проба пера. Также я хотел узнать на сколько тема интересна и актуальна — имеет ли смысл писать про коллажи дальше. Теперь я вижу, что люди интересуются этой темой, и планирую в ближайшем будущем написать продолжение.

возможность поворота изображения (поворот можно осуществлять только для необрезанных изображений)

Почему только для не обрезанных? Повороты можно делать на любом этапе.

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

Можно накладывать любые эффекты, если делать все действия на сервере, отправляя данные о картинке и об операции над ней с помощью аякса. Но этот способ будет работать медленней, чем обработка средствами браузера. Но есть и плюсы — гораздо больше возможностей.

[Gromo]

Почему только для не обрезанных? Повороты можно делать на любом этапе.

Я не совсем верно выразился. После поворота изображения, обрезать его уже будет если не невозможно, то слишком затруднительно по той причине, что вычисление обрезания повёрнутого изображения — задача нетривиальная. Я вижу способ обрезать только изображения, повёрнутые на 90/180/270/360 градусов. В остальных случаях обрезание невозможно. Но было бы очень интересно посмотреть на реализацию кропа изображения, повёрнутого на угол, отличный от 90/180/270, и сохранения на сервере средствами PHP.

Можно накладывать любые эффекты, если делать все действия на сервере, отправляя данные о картинке и об операции над ней с помощью аякса. Но этот способ будет работать медленней, чем обработка средствами браузера.

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