Как сделать instagram в браузере — Дмитрий Дудин, xbsoftware
DESCRIPTION
Дмитрий расскажет о: применении фильтров и эффектов для изображений прямо в браузере; достоинствах и недостатках Canvas, WebGl, SVG и CSS-фильтров и шейдеров; неизведанном мире SVG-фильтров, его продуманных до мелочей устоях, синтаксисе и правилах; возможностях обработки изображений — от простых чёрно-белых картинок до нелинейных искажений и градиентных карт. В докладе будет минимум скучной теории и максимум живых примеров.TRANSCRIPT
![Page 3: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/3.jpg)
Приукрасить
![Page 4: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/4.jpg)
Придать настроение
![Page 5: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/5.jpg)
Нелиней
ные искажен
ия
![Page 6: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/6.jpg)
Устоявшиеся практики
• Десктопный софт:
• Photoshop
• Photobooth Mac OS X, XnRetro ...
• Мобильные приложения:
• Snapseed, Camera+ и еще 100500 разных...
6
![Page 7: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/7.jpg)
Фильтрация изображений в веб несколько лет назад:
1. Flash
2. Отправляем на сервер,
там фильтруем,
возвращаем обратно на клиент
и все это время ждем, ждем, ждем...
7
![Page 8: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/8.jpg)
Все меняется к лучшему
![Page 9: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/9.jpg)
Способы фильтрации на клиентесегодня и в ближайшем будущем:
1. Canvas
2. WebGL
3. CSS-фильтры
4. CSS-шейдеры
5. SVG-фильтры
6. SVG-фильтры для HTML
9
![Page 10: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/10.jpg)
Canvas
![Page 11: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/11.jpg)
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(img);
var imgd = context.getImageData(0, 0, w, h)
var pixels = imgd.data;
11
![Page 12: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/12.jpg)
Не нужно изобретать свой велосипед
12
![Page 13: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/13.jpg)
13
![Page 14: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/14.jpg)
vintageJS
$(img).vintage({
contrast:32,
lighten:0.4,
noise: 20,
desaturate: 0.05
});
14
![Page 15: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/15.jpg)
15
![Page 16: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/16.jpg)
camanJS
Caman("image.jpg", "#canvas", function () {
this
.saturation(20)
.gamma(1.4)
.vignette(300, 60)
.render();
});
16
![Page 17: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/17.jpg)
Достоинства фильтрации с Canvas
1. IE 9 + и мобильные браузеры.
2. Много готовых решений, библиотек, плагинов.
3. Фильтры могут быть настолько сложными и
нестандартными, насколько у вас хватит
фантазии
. . . и насколько вы разбираетесь в цифровой
обработке изображений :)
17
![Page 18: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/18.jpg)
Недостатки фильтрации с Canvas
1. Нельзя отфильтровать картинки с других
доменов (включая поддомены) из-за
ограничений безопасности. Решается
проксированием или переводом в base64.
2. Сложные фильтры это медленная,
блокирующая операция.
Десктопный браузер подтормаживает…
Мобильный браузер серьезно тупит.18
![Page 19: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/19.jpg)
WebGL
![Page 20: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/20.jpg)
Что это о_O ?
precision mediump float;
varying vec2 position;
uniform sampler2D webcam;
void main() {
vec2 p = position;
vec4 color = texture2D(webcam, p);
color.rgb = 1.0 ‐ color.rgb;
gl_FragColor = color;
}
20
![Page 21: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/21.jpg)
Шейдеры
• Шейдер - кусок кода, который описывает
алгоритм обработки каждого пикселя в GPU.
• Достоинство - возможность пользоваться
параллельной архитектурой GPU.
• Бывают векторными и пиксельными (Fragment
Shaders)
• Описываются в синтаксисе GLSL (OpenGL
Shading Language)21
![Page 22: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/22.jpg)
Вернемся к cтрашному шейдеру
precision mediump float;
varying vec2 position;
uniform sampler2D webcam;
void main() {
vec2 p = position;
vec4 color = texture2D(webcam, p);
color.rgb = 1.0 ‐ color.rgb;
gl_FragColor = color;
}
22
![Page 23: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/23.jpg)
Велосипеды в WebGl - это больно
23
![Page 24: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/24.jpg)
![Page 25: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/25.jpg)
Достоинства glfx
1. Множество предустановленных фильтров.
2. Красивый и понятный API.
3. Возможность расширять библиотеку своими
шейдерами.
25
![Page 26: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/26.jpg)
WebGLImageFilter
26
![Page 27: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/27.jpg)
WebGLImageFilter прост виспользовании
var filter = new WebGLImageFilter();
filter.addFilter('hue', 180);
filter.addFilter('negative');
filter.addFilter('blur', 7);
var filteredImage = filter.apply(inputImage);
27
![Page 28: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/28.jpg)
Достоинства фильтрации с WebGL
1. Очень, очень, очень быстро.
2. Есть несколько хороших плагинов.
3. Можно использовать готовые шейдеры
написаные на языке GLSL
для OpenGL за последние 14 лет
(начиная c 2001 года)
28
![Page 29: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/29.jpg)
Недостатки фильтрации с WebGL
1. Слабая поддержка браузерами.
Chrome, Opera - отлично,
FF, Safari, IE11 - частично,
все остальные - никак.
2. Для нестандартных операций порог входа
достаточно высок.
29
![Page 30: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/30.jpg)
CSS-фильтры
![Page 31: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/31.jpg)
Синтаксис CSS-фильтров
‐webkit‐filter:
brightness(1.4)
contrast(2)
hue‐rotate(300deg)
sepia(0.3);
31
![Page 32: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/32.jpg)
![Page 33: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/33.jpg)
![Page 34: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/34.jpg)
Достоинства CSS-фильтров
1. Быстрые.
2. Очень удобно описываются.
34
![Page 35: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/35.jpg)
Недостатки CSS-фильтров
1. Пока только webkit(blink) браузеры.
2. Ничего кроме типовых операций.
т.е. … Инстаграма с ними не сделаешь :(
35
![Page 36: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/36.jpg)
CSS-шейдеры
![Page 37: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/37.jpg)
Синтаксис
img {
‐webkit‐filter: custom(
none
mix(
url(someFragmentShader.fs)
normal
source‐atop
)
);
}
37
![Page 38: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/38.jpg)
someFragmentShader.fs
precision mediump float;
void main()
{
css_ColorMatrix = mat4(1.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 1.0);
}
38
![Page 39: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/39.jpg)
![Page 40: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/40.jpg)
Достоинства CSS-шейдеров
1. Быстрые.
2. Можно делать сложные нестандартные
эффекты.
40
![Page 41: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/41.jpg)
Недостатки CSS-шейдеров
1. Сложность описания, высокий порог входа.
2. Вообще нигде толком не поддерживаются :)
41
![Page 42: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/42.jpg)
SVG-фильтры
![Page 43: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/43.jpg)
Нарисуем круг
<svg width="400" height="400">
<circle
cx="200"
cy="200"
fill="#3498db"
r="100"/>
</svg>
43
![Page 44: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/44.jpg)
Это круг :)
44
![Page 45: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/45.jpg)
Простейший svg-фильтр (blur)
<svg width="400" height="400">
<defs>
<filter id="f0">
<feGaussianBlur stdDeviation="50" />
</filter>
</defs>
<circle filter="url(#f0)" cx="200" cy="200"
fill="#3498db" r="100"/>
</svg>
45
![Page 46: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/46.jpg)
Простейший svg-фильтр (blur)
<svg width="400" height="400">
<defs>
<filter id="f0">
<feGaussianBlur stdDeviation="50" />
</filter>
</defs>
<circle filter="url(#f0)" cx="200" cy="200"
fill="#3498db" r="100"/>
</svg>
46
![Page 47: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/47.jpg)
Простейший svg-фильтр (blur)
<svg width="400" height="400">
<defs>
<filter id="f0">
<feGaussianBlur stdDeviation="50" />
</filter>
</defs>
<circle filter="url(#f0)" cx="200" cy="200"
fill="#3498db" r="100"/>
</svg>
47
![Page 48: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/48.jpg)
Простейший svg-фильтр (blur)
<svg width="400" height="400">
<defs>
<filter id="f0" >
<feGaussianBlur stdDeviation="40" />
</filter>
</defs>
<circle filter="url(#f0)" cx="200" cy="200"
fill="#3498db" r="100"/>
</svg>
48
![Page 49: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/49.jpg)
Результат
49
![Page 50: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/50.jpg)
Картинка внутри SVG
<svg width="1024" height="768">
<image
width="100%"
height="100%"
xlink:href="img/girl.jpg" />
</svg>
50
![Page 51: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/51.jpg)
Картинка внутри SVG + blur
<svg width="1024" height="768">
<defs>
<filter id="f1" >
<feGaussianBlur stdDeviation="10" />
</filter>
</defs>
<image filter="url(#f1)" xlink:href="img/girl.jpg"
width="100%" height="100%" />
</svg>
51
![Page 52: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/52.jpg)
![Page 53: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/53.jpg)
![Page 54: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/54.jpg)
Комбинация фильтров
<filter id="f2">
<feGaussianBlur stdDeviation="3" />
<feColorMatrix type="saturate" values="0">
</feColorMatrix>
</filter>
54
![Page 55: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/55.jpg)
Комбинация фильтров
<filter id="f2">
<feGaussianBlur result="a1" stdDeviation="3" />
<feColorMatrix type="saturate" values="0">
</feColorMatrix>
</filter>
55
![Page 56: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/56.jpg)
Комбинация фильтров
<filter id="f2">
<feGaussianBlur result="a1" stdDeviation="3" />
<feColorMatrix in="a1" type="saturate" values="0">
</feColorMatrix>
</filter>
56
![Page 57: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/57.jpg)
Комбинация фильтров
<filter id="f2">
<feGaussianBlur result="a1" stdDeviation="3" />
<feColorMatrix in="a1" type="saturate" values="0">
</feColorMatrix>
</filter>
57
![Page 58: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/58.jpg)
![Page 59: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/59.jpg)
Типы SVG-фильтров
<fe…Фильтр>
![Page 60: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/60.jpg)
feComponentTransfer
![Page 61: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/61.jpg)
feComponentTransfer
<feComponentTransfer>
<feFuncR type="linear" slope="5" intercept="‐0.5"/>
<feFuncG type="linear" slope="0.2"/>
<feFuncB type="linear" slope="0.2"/>
<feFuncA type="identity"/>
</feComponentTransfer>
61
![Page 62: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/62.jpg)
![Page 63: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/63.jpg)
feComponentTransfer
<feComponentTransfer>
<feFuncA type="linear" slope="0.5"/>
</feComponentTransfer>
63
![Page 64: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/64.jpg)
![Page 65: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/65.jpg)
feComponentTransfer
<feComponentTransfer>
<feFuncR type="linear" slope="0"/>
<feFuncG type="linear" slope="0"/>
<feFuncB type="linear" slope="1"/>
</feComponentTransfer>
65
![Page 66: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/66.jpg)
![Page 67: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/67.jpg)
feComponentTransfer
<feComponentTransfer>
<feFuncR type="linear" slope="10" intercept="‐4"/>
<feFuncG type="linear" slope="1.5" intercept="1"/>
<feFuncB type="linear" slope="2" intercept="‐1"/>
</feComponentTransfer>
67
![Page 68: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/68.jpg)
![Page 69: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/69.jpg)
feComponentTransfer
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0.5 1"/>
<feFuncG type="discrete" tableValues="0 0.5 1"/>
<feFuncB type="discrete" tableValues="0 0.5 1"/>
</feComponentTransfer>
69
![Page 70: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/70.jpg)
![Page 71: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/71.jpg)
feComponentTransfer
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"/>
<feFuncG type="table" tableValues="1 0"/>
<feFuncB type="table" tableValues="1 0"/>
</feComponentTransfer>
71
![Page 72: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/72.jpg)
![Page 73: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/73.jpg)
feComponentTransfer
<feComponentTransfer>
<feFuncR
type="gamma"
amplitude="2"
exponent="0.5"
offset="0.2"
/>
</feComponentTransfer>
73
![Page 74: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/74.jpg)
![Page 75: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/75.jpg)
feColorMatrix
![Page 76: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/76.jpg)
feColorMatrix
| R' | | a00 a01 a02 a03 a04 | | R |
| G' | | a10 a11 a12 a13 a14 | | G |
| B' | = | a20 a21 a22 a23 a24 | * | B |
| A' | | a30 a31 a32 a33 a34 | | A |
| 1 | | 0 0 0 0 1 | | 1 |
76
![Page 77: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/77.jpg)
feColorMatrix
<feColorMatrix
type="matrix"
values="
0.343 0.669 0.119 0 0
0.249 0.626 0.130 0 0
0.172 0.334 0.111 0 0
0 0 0 1 0
"/>
77
![Page 78: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/78.jpg)
![Page 79: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/79.jpg)
![Page 80: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/80.jpg)
![Page 81: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/81.jpg)
Умножать на матрицу, что-бысделать картинку чёрно-белой? о_О
![Page 82: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/82.jpg)
<feColorMatrix type="saturate" values="0" />
![Page 83: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/83.jpg)
<feColorMatrix type="saturate" values="4" />
![Page 84: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/84.jpg)
<feColorMatrix type="saturate" values="50" />
![Page 85: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/85.jpg)
<feColorMatrix type="hueRotate" values="0" />
![Page 86: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/86.jpg)
<feColorMatrix type="hueRotate" values="120" />
![Page 87: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/87.jpg)
<feColorMatrix type="hueRotate" values="240" />
![Page 88: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/88.jpg)
<feColorMatrix type="hueRotate" values="320" />
![Page 89: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/89.jpg)
<feColorMatrix type="luminanceToAlpha" />
![Page 90: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/90.jpg)
feConvolveMatrix
![Page 91: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/91.jpg)
feConvolveMatrix
<feConvolveMatrix order="3"
kernelMatrix="1 ‐1 1 ‐1 ‐1 ‐1 1 ‐1 1"/>
1 ‐1 1
‐1 ‐1 ‐1
1 ‐1 1
91
![Page 92: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/92.jpg)
Classic #selfish #duckface
![Page 93: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/93.jpg)
Fixed #selfish #duckface
![Page 94: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/94.jpg)
<feConvolveMatrix order="3"
kernelMatrix="1 ‐1 1 ‐1 ‐0.1 ‐1 1 ‐1 1"/>
![Page 95: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/95.jpg)
<feConvolveMatrix order="3"
kernelMatrix="9 0 0 0 1 0 0 0 ‐9"/>
![Page 96: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/96.jpg)
<feConvolveMatrix order="3"
kernelMatrix="‐1 ‐1 ‐1 ‐1 7 ‐1 ‐1 ‐1 ‐1"/>
![Page 97: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/97.jpg)
<feConvolveMatrix order="5"
kernelMatrix="1 1 1 1 1 1 ‐2 ‐2 ‐2 1 1 ‐2 0 ‐2 1 1 ‐2 ‐2 ‐2 1 1 1 1 1 1"/>
![Page 98: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/98.jpg)
feComposite
![Page 99: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/99.jpg)
feComposite
<feComposite
in="source1"
in2="source2"
operator="xor"/>
99
![Page 100: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/100.jpg)
over
in
out
atop
xor
arithmetick1="0" k2="1" k3="-1" k4="1"
arithmetick1=".5" k2=".5" k3=".5" k4=".5"
arithmetick1="0" k2="1" k3="1" k4="0"
100
![Page 101: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/101.jpg)
feBlend
![Page 102: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/102.jpg)
feBlend
<feBlend
in="source1"
in2="source2"
mode="lighten"/>
102
![Page 103: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/103.jpg)
Blend modes
normal
screen
multiply
lighten
darken
103
![Page 104: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/104.jpg)
feTile
![Page 105: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/105.jpg)
feTile
<feTile in="source" />
105
![Page 106: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/106.jpg)
![Page 107: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/107.jpg)
![Page 108: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/108.jpg)
feDisplacementMap
![Page 109: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/109.jpg)
feDisplacementMap
109
![Page 110: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/110.jpg)
feDisplacementMap
110
![Page 111: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/111.jpg)
Красный канал. 20 градусов
111
![Page 112: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/112.jpg)
Cиний канал. -20 градусов
112
![Page 113: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/113.jpg)
+ Неподвижный зеленый
113
![Page 114: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/114.jpg)
Happy face
114
![Page 115: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/115.jpg)
Happy face
115
![Page 116: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/116.jpg)
Happy face lvl 40
116
![Page 117: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/117.jpg)
Happy face lvl80
117
![Page 118: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/118.jpg)
Возможностианимации
![Page 119: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/119.jpg)
Синтаксис для SVG анимаций
<feColorMatrix type="saturate" values="0.2">
</feColorMatrix>
119
![Page 120: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/120.jpg)
Синтаксис для SVG анимаций
<feColorMatrix type="saturate" values="0.2">
<animate attributeName="values" />
</feColorMatrix>
120
![Page 121: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/121.jpg)
Синтаксис для SVG анимаций
<feColorMatrix type="saturate" values="0.2">
<animate attributeName="values" />
</feColorMatrix>
121
![Page 122: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/122.jpg)
Синтаксис для SVG анимаций
<feColorMatrix type="saturate" values="0.2">
<animate
attributeName="values"
values="0;5;0"
dur="2s"
repeatCount="indefinite"/>
</feColorMatrix>
122
![Page 123: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/123.jpg)
Анимация feColorMatrix
123
![Page 124: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/124.jpg)
Анимация feMorphology radius
124
![Page 125: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/125.jpg)
Анимация feDisplacementMap scale
125
![Page 126: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/126.jpg)
Немного хипстерствадля примера
![Page 127: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/127.jpg)
![Page 128: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/128.jpg)
![Page 129: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/129.jpg)
![Page 130: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/130.jpg)
![Page 131: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/131.jpg)
![Page 132: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/132.jpg)
![Page 133: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/133.jpg)
![Page 134: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/134.jpg)
![Page 135: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/135.jpg)
![Page 136: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/136.jpg)
![Page 137: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/137.jpg)
![Page 138: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/138.jpg)
Достоинства SVG-фильтров ипочему мы выбрали их
1. Быстрые.
2. Не нужно никаких дополнительных библиотек.
3. Поддержка разветвленных структур.
4. Cупер-возможности, огромная спецификация.
5. Встроенная поддержка анимаций.
6. Возможность фильтрации картинок с любых
доменов.
138
![Page 139: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/139.jpg)
Недостатки SVG-фильтров
1. IE10+, встроенный браузер на Android 4.4+
2. Необходимость вкладывать изображение
внуть SVG
139
![Page 140: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/140.jpg)
SVG-фильтрыдля html
![Page 141: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/141.jpg)
<svg>
<defs>
<filter id="f1">
<feGaussianBlur stdDeviation="10"/>
</filter>
</defs>
</svg>
img {
‐webkit‐filter: url(#f1);
filter: url(#f1);
}
141
![Page 142: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/142.jpg)
<svg>
<defs>
<filter id="f1">
<feGaussianBlur stdDeviation="10 0"/>
</filter>
</defs>
</svg>
div {
‐webkit‐filter: url(#f1);
filter: url(#f1);
}
142
![Page 143: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/143.jpg)
![Page 144: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/144.jpg)
![Page 145: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/145.jpg)
Вопросы?
![Page 146: Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware](https://reader034.vdocuments.us/reader034/viewer/2022042601/5462141daf79597b0b8b68d5/html5/thumbnails/146.jpg)
facebook.com/html5by
twitter.com/html5by
vk.com/html5by
146