Как сделать выбор картины в интернет-магазине наиболее наглядным?

Недавно мы разработали очень интересный и яркий проект – Art,please!. Эта компания  делает сумасшедше красивую печать на холсте. Естественно, что клиент со слоганом "Искусство в каждый дом" заслуживал наилучшего решения основной задачи: дать возможность клиентам в режиме онлайн подобрать размер картины и раму к ней, а также сразу увидеть ее в собственном интерьере.

Перед нами стоял выбор из шести вариантов решений данной задачи:

 

  • HTML + CSS + JS

При комбинации трёх технологий можно добиться размещения графических частей в определенном порядке.

Достоинства: нет.
Недостатки: сложность реализации и неудовлетворительный результат в плане качества и поддержки.

  • ImageMagick

Свободный и многоплатформенный пакет программ для неинтерактивной (пакетной) обработки графических файлов. Поддерживает все популярные форматы графических файлов. Может использоваться с  популярными языками программирования в скриптах для командной оболочки или самостоятельно как набор консольных утилит.

 Достоинства: высокая скорость работы, поддержка большого количества форматов, широкие возможности обработки изображений.
Недостатки: отсутствие поддержки на обычных хостингах и сложность в разработке.

 

  • Canvas

Элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи JavaScript.

Достоинства: работа на стороне клиента без нагрузки на сервер.
Недостатки:  Не поддерживается старыми версиями IE (<9). При сложной обработке графики может влиять на производительность браузера.

 

  •  GD2

Программная библиотека для динамической работы с изображениями.

Достоинства: Входит в стандартную поставку PHP и прост в изучении.
Недостатки:  потребление памяти, недостаточно большой функционал.

 

  • Flash

Мультимедийная платформа компании Adobe для создания веб-приложений или мультимедийных презентаций.

Достоинства: большие возможности для работы с графикой.
Недостатки: Необходимость установки дополнительного ПО (FlashPlayer), требователен к ресурсам компьютера.

 

  • Java

Объектно-ориентированный язык программирования.

Достоинства:  работа на стороне клиента без нагрузки на сервер.
Недостатки: Необходимость установки виртуальной машины. Сложность в разработке.

 

Нами была выбрана реализация с использованием библиотеки GD как самая удобная и поддерживающаяся на всех хостингах.

Art, please!

Входные параметры для генерации изображения следующие:  картинка одной грани рамки, картина, цвет паспарту, размеры всех элементов в сантиметрах, размер выходного изображения в пикселях.

Мы сделали так, что на основании входных параметров вычисляется  размер в пикселях для каждого из составных элементов. Рамка состоит из четырех частей, которые укладываются на итоговое изображение. К рамке подрисовывается паспарту заданного цвета и накладывается картинка. Всё это показывается пользователю в виде обычной JPG-картинки, которую он может сохранить на компьютер.


Координационный
совет SPECIA
Санкт-Петербург,
8-я Красноармейская ул., д.10