WooCommerce / редактирование фото

Подзадача в рамках разработки интернет-магазина на WordPress/WooCommerce.

Потребовалось создать новый тип продукции, для заказа которой:

• Пользователь загружает фотографию на сайт;
• Фотография ложится под рамку изделия;
• Пользователь, посредством мышки или тач-скрина, правит положение фото в рамке;
• Также пользователь имеет возможность отрегулировать размер фото, его яркость, насыщенность и контраст.

Изначально предполагалась реализация через CSS-фильтры, но, как выяснилось, IE в принципе не поддерживает фильтры, а Safari на iPhone рубится при попытке их использования. Поэтому управление картинкой было перенесено на CANVAS с попиксельной коррекцией изображения.

В проекте задействованы:

• Paper.js - библиотечка для работы с CANVAS
• jQuery UI для реализации элементов управления

Ссылка на пример.