Краткий обзор методов фильтрации изображений c использованием html5, css3, javascript, svg

Фильтрация изображений (автоматические корректировки параметров, эффекты, пост-обработка и т.п.) – это задачи которые до недавнего времени вообще не возможно было решить в браузере. Все делалось с помощью старых друзей: флеша, сервера или фотошопа. Сейчас, в связи с повсеместным использованием 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+ (подробнее о поддержке браузерами тут)

В ближайшем будущем я постараюсь добавить несколько статей с подробным описанием некоторых методов. Жду Ваших пожеланий и предложений в комментариях

PDF и версия для печати