Свёртка в вебе

Я как-то пропустил момент, когда фильтры SVG стало можно накладывать на обычный тег IMG, а не на изображения внутри SVG же. Любопытные эффекты можно делать, например, можно наложить свёртку для выделения краёв и это будет работать:

<style>
    .edge {
        -webkit-filter: url(#edge);
        filter: url(#edge);
    }
</style>

<svg style="width: 0; height: 0">
<filter id="edge">
<feConvolveMatrix kernelMatrix="-1 -1 -1 -1  9  -1 -1  -1  -1" />
</filter>
</svg>

<image src="sample.jpg" class="edge">

Магические числа в матрице — специальное ядро.

Впрочем, и раньше можно было внедрить в ХТМЛ СВГ-картинку и наложить сверху фильтр, ничего особенного, но мороки чуть больше. При желании этот фильтр можно унести прямо в ЦСС при помощи data URI, но тогда он продублируется два раза — для префиксной и безпрефиксной формы (несмотря на уверения «Кэнайюз», «Хром» и «Сафари» отказались работать без префикса).

С таким возможностями, немудрено, что онлайновых «фотошопов» развелось, как грязи. Немного помучавшись с консолью, можно найти способ как поменять матрицу и это тоже будет работать! Например, вот так меняется число по центру (где у меня в примере девятка записана):

var arr = document.getElementById('edge').childNodes;

for (var i = 0; i < arr.length; i++) {
    if (arr[i].kernelMatrix) {
        arr[i].kernelMatrix.baseVal.getItem(4).value = newvalue;
        break;
    }
}

Осталось только соединить этот код с «крутилкой» и готов онлайн-фильтр «выделение краёв».

Поделиться
Отправить
10 комментариев
Svan

В IE не работает.
Зато в хроме работает вообще с любыми элементами, например, с div’ами, накладывая фильтр на всё div’ное содержимое.

Svan

Upd.
Работает: Chrome, Firefox
Не работает: IExplore, Opera, Safari

Но штука весьма прикольная, конечно. Спасибо.

Евгений Степанищев (bolknote.ru)

Комментарий для Svan:

В каком IE не работает? Начиная с 10-го должно. В «Сафари» (у меня седьмой) — работает.

Svan

В 10-ом IE не работает. По крайней мере у меня.
В пятом Safari под Win7 тоже (седьмого, под винду, как я понимаю, не существует?)

заполните это поле

Сломал глаза об слово «кэнайюз» :)

Евгений Степанищев (bolknote.ru)

Комментарий для заполните это поле:

Сломал глаза об слово «кэнайюз» :)

Когда вы впервые читаете имя и фамилию какой-то новой звезды, глаза не ломаете?

Евгений Степанищев (bolknote.ru)

Комментарий для Svan:

В 10-ом IE не работает. По крайней мере у меня.

Видимо «кэнайюз» обманывает. Придётся для IE оборачивать картинку в SVG.

В пятом Safari под Win7 тоже (седьмого, под винду, как я понимаю, не существует?)

Неа, не существует. Надо про него забыть уже под Винду, он не выпускается там.

Vladimir Moskva (fulc.ru)

Когда вы впервые читаете имя и фамилию какой-то новой звезды, глаза не ломаете?

Мне даже пришлось посмотреть на ссылку, чтобы понять, что это такое. С именами такого не бывает.

Евгений Степанищев (bolknote.ru)

Комментарий для fulc.ru:

Потому что имена ты произносишь вслух, а текст никогда вслух не читаешь? Когда Закерберг стал проникать в рунет, никто настолько не знал кто это и как произносится, что он стал Цукербергом. Но никто, слава ЛММ, не пишет «Zuckerberg» из-за этого.

заполните это поле

Комментарий для Евгения Степанищева:

Сломал глаза об слово «кэнайюз» :)
Когда вы впервые читаете имя и фамилию какой-то новой звезды, глаза не ломаете?

Ломаю. Я в курсе что спорить с вами на эту тему бесполезно, просто констатировал факт.

Популярное