Свёртка в вебе
Я как-то пропустил момент, когда фильтры 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;
}
}
Осталось только соединить этот код с «крутилкой» и готов онлайн-фильтр «выделение краёв».
В IE не работает.
Зато в хроме работает вообще с любыми элементами, например, с div’ами, накладывая фильтр на всё div’ное содержимое.
Upd.
Работает: Chrome, Firefox
Не работает: IExplore, Opera, Safari
Но штука весьма прикольная, конечно. Спасибо.
Комментарий для Svan:
В каком IE не работает? Начиная с 10-го должно. В «Сафари» (у меня седьмой) — работает.
В 10-ом IE не работает. По крайней мере у меня.
В пятом Safari под Win7 тоже (седьмого, под винду, как я понимаю, не существует?)
Сломал глаза об слово «кэнайюз» :)
Комментарий для заполните это поле:
Когда вы впервые читаете имя и фамилию какой-то новой звезды, глаза не ломаете?
Комментарий для Svan:
Видимо «кэнайюз» обманывает. Придётся для IE оборачивать картинку в SVG.
Неа, не существует. Надо про него забыть уже под Винду, он не выпускается там.
Мне даже пришлось посмотреть на ссылку, чтобы понять, что это такое. С именами такого не бывает.
Комментарий для fulc.ru:
Потому что имена ты произносишь вслух, а текст никогда вслух не читаешь? Когда Закерберг стал проникать в рунет, никто настолько не знал кто это и как произносится, что он стал Цукербергом. Но никто, слава ЛММ, не пишет «Zuckerberg» из-за этого.
Комментарий для Евгения Степанищева:
Ломаю. Я в курсе что спорить с вами на эту тему бесполезно, просто констатировал факт.