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

Я как-то пропустил момент, когда фильтры 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;
    }
}
Осталось только соединить этот код с «крутилкой» и готов онлайн-фильтр «выделение краёв».
26 мая 2014 06:41

Svan (инкогнито)
26 мая 2014, 08:42

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

Svan (инкогнито)
26 мая 2014, 08:54

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

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

Евгений Степанищев (bolknote.ru)
26 мая 2014, 08:57, ответ предназначен Svan

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

Svan (инкогнито)
26 мая 2014, 09:19

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

заполните это поле (инкогнито)
26 мая 2014, 12:44

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

Евгений Степанищев (bolknote.ru)
26 мая 2014, 13:01, ответ предназначен заполните это поле

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

Евгений Степанищев (bolknote.ru)
26 мая 2014, 13:03, ответ предназначен Svan

В 10-ом IE не работает. По крайней мере у меня.
Видимо «кэнайюз» обманывает. Придётся для IE оборачивать картинку в SVG.
В пятом Safari под Win7 тоже (седьмого, под винду, как я понимаю, не существует?)
Неа, не существует. Надо про него забыть уже под Винду, он не выпускается там.

Vladimir Moskva (fulc.ru)
26 мая 2014, 14:33

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

Евгений Степанищев (bolknote.ru)
26 мая 2014, 20:36, ответ предназначен Vladimir Moskva (fulc.ru):

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

заполните это поле (инкогнито)
27 мая 2014, 16:47, ответ предназначен Евгений Степанищев (bolknote.ru):

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

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)