Comments 13
Вау! Мне понравилось.
Ребят, а карму-то за что минусовать? Первый пост, я вы без аргументов в минус сразу :( Напишите в чем не прав, чтоб в будущем не допускать ошибок
«апликации» не вращаются
Для вращения элементов в браузере можно воспользоваться плагином JQuery UI Rotatable. Но я не стал описывать вращение элементов, поскольку с этим возникают проблемы в отображении и в высчитывании угла поворота(для передачи на сервер) в браузерах IE 7-8. Статья и так получилась большая и я подумал, что не стоит переполнять ее кодом. Я хочу написать по этому поводу отдельную статью, которая будет продолжением затронутой темы.
Давно над Джоли так не издевались.
У Вас в html все аппликации имеют одинаковый id, что противоречит самой сути идентификаторов. Думаю, Вы просто неуследили.
А статья хорошая!
А статья хорошая!
Было бы круто добавить вращение и текстовые поля (спич баббл).
Картинки справа мне почему то хочется перетянуть как drag&drop, а они не тягаются.
Картинки справа мне почему то хочется перетянуть как drag&drop, а они не тягаются.
// отступ сверху до робочей области
// отступ слева до робочей областиКонечно, это маловажно, но «робочей» мозолит глаза.
Для коллажа изображений не хватает возможности Drag'n'Drop изображений с панели элементов, возможности обрезания изображения (довольно непростая задача по поддержке ресайза и кропа изображения, чтобы можно было откропить ресайзенное изображение и отресайзить уже кропнутое, при этом эффект обрезания изображения достигается overflow:hiden у контейнера, а само изображение позиционируется с отрицательными координатами).
Также в браузерах есть поддержка эффекта размывания изображения (к сожалению, с помощью JavaScript можно добиться только примерной схожести размывания), чёрно-белые фильтры, управление слоями (изображение на передний/задний фон, на слой выше/ниже), возможность поворота изображения (поворот можно осуществлять только для необрезанных изображений), добавление тени (не поддерживается в IE для повёрнутого изображения); добавление блоков текста с настраиваемым фоном, прозрачностью, WYSIWYG-редактором и ещё много другого.
Грамотно-оформленная статья, описывающая хотя бы половину из вышеупомянутого функционала, была бы хорошей. А эта статья, имхо, нечто среднее между пошаговым руководством для начинающих (не хватает подробного описания шагов и возможных опций) и обзором возможностей (мало возможностей затронуто и описано).
Также в браузерах есть поддержка эффекта размывания изображения (к сожалению, с помощью JavaScript можно добиться только примерной схожести размывания), чёрно-белые фильтры, управление слоями (изображение на передний/задний фон, на слой выше/ниже), возможность поворота изображения (поворот можно осуществлять только для необрезанных изображений), добавление тени (не поддерживается в IE для повёрнутого изображения); добавление блоков текста с настраиваемым фоном, прозрачностью, WYSIWYG-редактором и ещё много другого.
Грамотно-оформленная статья, описывающая хотя бы половину из вышеупомянутого функционала, была бы хорошей. А эта статья, имхо, нечто среднее между пошаговым руководством для начинающих (не хватает подробного описания шагов и возможных опций) и обзором возможностей (мало возможностей затронуто и описано).
Я несколько раз упомянул в статье, что описываю только часть работы с коллажем, а именно «Нанесение аппликаций на изображение».
Как Вы и сами верно заметили, создание всего функционала коллажа довольно непростая задача, поэтому я решил разбить описание на несколько статей. А эта статья «пилотная», так сказать, проба пера. Также я хотел узнать на сколько тема интересна и актуальна — имеет ли смысл писать про коллажи дальше. Теперь я вижу, что люди интересуются этой темой, и планирую в ближайшем будущем написать продолжение.
Почему только для не обрезанных? Повороты можно делать на любом этапе.
Можно накладывать любые эффекты, если делать все действия на сервере, отправляя данные о картинке и об операции над ней с помощью аякса. Но этот способ будет работать медленней, чем обработка средствами браузера. Но есть и плюсы — гораздо больше возможностей.
Как Вы и сами верно заметили, создание всего функционала коллажа довольно непростая задача, поэтому я решил разбить описание на несколько статей. А эта статья «пилотная», так сказать, проба пера. Также я хотел узнать на сколько тема интересна и актуальна — имеет ли смысл писать про коллажи дальше. Теперь я вижу, что люди интересуются этой темой, и планирую в ближайшем будущем написать продолжение.
возможность поворота изображения (поворот можно осуществлять только для необрезанных изображений)
Почему только для не обрезанных? Повороты можно делать на любом этапе.
Также в браузерах есть поддержка эффекта размывания изображения (к сожалению, с помощью JavaScript можно добиться только примерной схожести размывания),
Можно накладывать любые эффекты, если делать все действия на сервере, отправляя данные о картинке и об операции над ней с помощью аякса. Но этот способ будет работать медленней, чем обработка средствами браузера. Но есть и плюсы — гораздо больше возможностей.
Почему только для не обрезанных? Повороты можно делать на любом этапе.
Я не совсем верно выразился. После поворота изображения, обрезать его уже будет если не невозможно, то слишком затруднительно по той причине, что вычисление обрезания повёрнутого изображения — задача нетривиальная. Я вижу способ обрезать только изображения, повёрнутые на 90/180/270/360 градусов. В остальных случаях обрезание невозможно. Но было бы очень интересно посмотреть на реализацию кропа изображения, повёрнутого на угол, отличный от 90/180/270, и сохранения на сервере средствами PHP.
Можно накладывать любые эффекты, если делать все действия на сервере, отправляя данные о картинке и об операции над ней с помощью аякса. Но этот способ будет работать медленней, чем обработка средствами браузера.
Вышенаписанные эффекты достигаются JavaScript-ом без необходимости задействования сервера в промежуточных этапах, т.к. обработка изображений слишком дорогостоящая операция. На сервере генерируется только конечное изображение коллажа.
Sign up to leave a comment.
Пример работы jQuery UI + PHP и GD. Нанесение аппликаций на изображение