Краткий обзор методов фильтрации изображений 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+ (подробнее о поддержке браузерами тут)

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

Отмечено как: , , , , , , ,
4 comments on “Краткий обзор методов фильтрации изображений c использованием html5, css3, javascript, svg
  1. drcreazy:

    Ну все, теперь можно запилить свой инстаграмм с пасьянсом и дамами

  2. Александр (graduss):

    Поясню один момент касаемо первого вариант. SVG, для web разработки, очень удобен,
    с SVG элементами можно работать так же как и с DOM элементами. То есть вставлять на страницу с помощью js (с единственным отличием место метода «createElement» нужна использовать «createElementNS», где первый параметра должен иметь значение «http://www.w3.org/2000/svg»), устанавливать обработчике событий, изменят атрибуты.

    Но далеко на всеми возможностями SVG можно управлять с помощью js в том числе создание и привязка фильтров, вставка изображений, создание элементов в блоке «defs» и клонирование их с помощью «use».

    Надеюсь эта информация будет полезна при выборе технологии и проектировании web-приложений.

  3. GreLI:

    Александр (graduss), Переиспользовать в <use> можно любые элементы, не только те, что в <defs>.

  4. Вася:

    «Демо http://srufaculty.sru.edu» — что это за факультеты такие?…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

*

* Copy This Password *

* Type Or Paste Password Here *

Проект создан в GanttPRO
Спасибо за лайк в FACEBOOK
Подписывайтесь на новости вконтакте
Последние статьи от html5.by