Фильтрация изображений (автоматические корректировки параметров, эффекты, пост-обработка и т.п.) — это задачи которые до недавнего времени вообще не возможно было решить в браузере. Все делалось с помощью старых друзей: флеша, сервера или фотошопа. Сейчас, в связи с повсеместным использованием html5 и css3, появилось и развивается сразу несколько возможностей обработки изображений непосредственно в браузере. Давайте попробуем собрать все доступные методы и посмотреть на их достоинства, недостатки и поддержку браузерами.
1. SVG filters
Демо http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/Filters2.htm
Отлично работает, но только для SVG элементов. То есть для того что-бы применить эффекты к изображению, его надо сначала поместить непосредственно внутрь SVG, что не всегда удобно. Небольшой пример того, как это выглядит в коде:
SVG feColorMatrix
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="F">
<feColorMatrix type="saturate" in="SourceGraphic" >
<animate attributeName="values" values="0;1;0" dur="2s" repeatCount="indefinite"/>
</feColorMatrix>
</filter>
</defs>
<image x="50%" y="0" width="25%" height="35%" xlink:href="myimage.jpg" filter="url(#F)"/>
</svg>
w3c рекомендация http://www.w3.org/TR/SVG/filters.html
Поддержка браузерами: IE10+ и все нормальные браузеры (подробнее тут)
2. SVG effects for HTML
Демо: http://cdpn.io/Kdsfr
Позволяет применять вышеописанные SVG фильтры к любым HTML элементам вне SVG. В коде это выглядит так:
HTML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="F">
<feGaussianBlur stdDeviation="10 1"/>
</filter>
</defs>
</svg>
CSS
img {
-webkit-filter: url(#F);
filter: url(#F);
}
черновик w3c рекомендации http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement
Поддержка браузерами (включая IE10+) пока неполная и с багами при смешивании эффектов (подробнее тут)
3. CSS Filter Effects
Демо: http://html5-demos.appspot.com/static/css/filters/index.html
Призван в будущем заменить вышеуказанный SVG effects for HTML, предоставляя удобный синтаксис для применения любых распространенных типов фильтров без использования SVG. Например:
CSS
img {
-webkit-filter: blur(5px) grayscale(0.5) sepia(0.5);
filter: blur(5px) grayscale(0.5) sepia(0.5);
}
Черновик w3c рекомендации: http://www.w3.org/TR/filter-effects/
К сожалению поддержка браузерами пока очень слабая, точнее сказать chrome + safari с префиксом -webkit (подробнее тут)
4.Canvas
Демо одной из библиотек: http://www.createjs.com/#!/EaselJS/demos/filters
Делаем с изображениями все что хотим. Это медленнее, чем вышеописанные методы, но позволяет Вам писать абсолютно любые фильтры и алгоритмы обработки самим. Вы работаете с матрицей пикселей, цветовымим каналами и прозрачностью как Вам захочется. Также можно найти тонны библиотек уже написанных для этого. Большой недостаток — ограничения безопасности при работе с изображениями загруженными со сторонних доменов и даже своих поддоменов.
спецификация whatwg http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
спецификация w3c http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/
Поддержка: IE9+ и все нормальные браузеры (подробнее тут)
5. WebGl shaders
Демо библиотеки glfx
Все круто и очень быстро за счет максимального использования GPU (видеокарты), в целях распараллеливания обработки. Здесь можно применять готовые шейдеры из openGL «как есть» (как пиксельные, так и векторные). Можно фильтровать даже видеопотоки, т.е каждый кадр видео при довольно высоком fps. Из недостатков — все это довольно непросто понять для обычного веб-мастера. Плюс к этому — все то-же ограничение безопасности (как у вышеописанного canvas).
Cпецификация http://www.khronos.org/registry/webgl/specs/1.0/#5.8
Работает в ie11+ (подробнее о поддержке браузерами тут)
В ближайшем будущем я постараюсь добавить несколько статей с подробным описанием некоторых методов. Жду Ваших пожеланий и предложений в комментариях
Ну все, теперь можно запилить свой инстаграмм с пасьянсом и дамами
Поясню один момент касаемо первого вариант. SVG, для web разработки, очень удобен,
с SVG элементами можно работать так же как и с DOM элементами. То есть вставлять на страницу с помощью js (с единственным отличием место метода «createElement» нужна использовать «createElementNS», где первый параметра должен иметь значение «http://www.w3.org/2000/svg»), устанавливать обработчике событий, изменят атрибуты.
Но далеко на всеми возможностями SVG можно управлять с помощью js в том числе создание и привязка фильтров, вставка изображений, создание элементов в блоке «defs» и клонирование их с помощью «use».
Надеюсь эта информация будет полезна при выборе технологии и проектировании web-приложений.
Александр (graduss), Переиспользовать в
<use>
можно любые элементы, не только те, что в<defs>
.«Демо http://srufaculty.sru.edu» — что это за факультеты такие?…