понедельник, 20 августа 2012 г.

Попытка редактировать изображения на html5 canvas

Появилась задача редактировать фотографии online - изменять контраст, яркость, применять эффекты - сепия, черно/белый и прочие красивости. С моей любовью к яваскрипту я, конечно же, первым делом пошла искать решение на html5 canvas.

Самое достойное, что я нашла - библиотека Pixastic http://pixastic.com/ (там сейчас на сайте демо не работает. написала разработчику - сказал, что посмотрит, но за месяц так и не посмотрел) Быстро, удобно, реализовано достаточно эффектов, стабильно работает - рекомендую. Но, как обычно, я упёрлась в стену под названием IE :( С IE ниже 9 версии о таких серьезных задачах на html5 можно забыть, а для заказчика поддержка IE8 принципиально важна

Собственно, есть еще одна проблема - мне необходимо редактировать изображения в большом разрешении и с хорошим качеством: они потом используются в fullHD видео. В браузере результирующее изображение имеет размер того canvas, в котором оно расположено, т.е. небольшой области экрана. Можно, конечно, выводить картинку в скрытый через css огромный canvas, но страница будет тяжелой и тормозящей.

По сему было решено редактировать картинки на серверной стороне, с чем прекрасно справилась библиотечка AForge