Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
-
Upload
yandex -
Category
Technology
-
view
563 -
download
1
description
Transcript of Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
Как сделатьInstagram в браузереДмитрий Дудин @nedudi
Приукрасить
Придать настроение
Нелиней
ные искажен
ия
Устоявшиеся практики
• Десктопный софт:
• Photoshop
• Photobooth Mac OS X, XnRetro ...
• Мобильные приложения:
• Snapseed, Camera+ и еще 100500 разных...
6
Фильтрация изображений в веб несколько лет назад:
1. Flash
2. Отправляем на сервер,
там фильтруем,
возвращаем обратно на клиент
и все это время ждем, ждем, ждем...
7
Все меняется к лучшему
Способы фильтрации на клиентесегодня и в ближайшем будущем:
1. Canvas
2. WebGL
3. CSS-фильтры
4. CSS-шейдеры
5. SVG-фильтры
6. SVG-фильтры для HTML
9
Canvas
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
Не нужно изобретать свой велосипед
12
13
vintageJS
$(img).vintage({
contrast:32,
lighten:0.4,
noise: 20,
desaturate: 0.05
});
14
15
camanJS
Caman("image.jpg", "#canvas", function () {
this
.saturation(20)
.gamma(1.4)
.vignette(300, 60)
.render();
});
16
Достоинства фильтрации с Canvas
1. IE 9 + и мобильные браузеры.
2. Много готовых решений, библиотек, плагинов.
3. Фильтры могут быть настолько сложными и
нестандартными, насколько у вас хватит
фантазии
. . . и насколько вы разбираетесь в цифровой
обработке изображений :)
17
Недостатки фильтрации с Canvas
1. Нельзя отфильтровать картинки с других
доменов (включая поддомены) из-за
ограничений безопасности. Решается
проксированием или переводом в base64.
2. Сложные фильтры это медленная,
блокирующая операция.
Десктопный браузер подтормаживает…
Мобильный браузер серьезно тупит.18
WebGL
Что это о_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
Шейдеры
• Шейдер - кусок кода, который описывает
алгоритм обработки каждого пикселя в GPU.
• Достоинство - возможность пользоваться
параллельной архитектурой GPU.
• Бывают векторными и пиксельными (Fragment
Shaders)
• Описываются в синтаксисе GLSL (OpenGL
Shading Language)21
Вернемся к 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
Велосипеды в WebGl - это больно
23
Достоинства glfx
1. Множество предустановленных фильтров.
2. Красивый и понятный API.
3. Возможность расширять библиотеку своими
шейдерами.
25
WebGLImageFilter
26
WebGLImageFilter прост виспользовании
var filter = new WebGLImageFilter();
filter.addFilter('hue', 180);
filter.addFilter('negative');
filter.addFilter('blur', 7);
var filteredImage = filter.apply(inputImage);
27
Достоинства фильтрации с WebGL
1. Очень, очень, очень быстро.
2. Есть несколько хороших плагинов.
3. Можно использовать готовые шейдеры
написаные на языке GLSL
для OpenGL за последние 14 лет
(начиная c 2001 года)
28
Недостатки фильтрации с WebGL
1. Слабая поддержка браузерами.
Chrome, Opera - отлично,
FF, Safari, IE11 - частично,
все остальные - никак.
2. Для нестандартных операций порог входа
достаточно высок.
29
CSS-фильтры
Синтаксис CSS-фильтров
‐webkit‐filter:
brightness(1.4)
contrast(2)
hue‐rotate(300deg)
sepia(0.3);
31
Достоинства CSS-фильтров
1. Быстрые.
2. Очень удобно описываются.
34
Недостатки CSS-фильтров
1. Пока только webkit(blink) браузеры.
2. Ничего кроме типовых операций.
т.е. … Инстаграма с ними не сделаешь :(
35
CSS-шейдеры
Синтаксис
img {
‐webkit‐filter: custom(
none
mix(
url(someFragmentShader.fs)
normal
source‐atop
)
);
}
37
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
Достоинства CSS-шейдеров
1. Быстрые.
2. Можно делать сложные нестандартные
эффекты.
40
Недостатки CSS-шейдеров
1. Сложность описания, высокий порог входа.
2. Вообще нигде толком не поддерживаются :)
41
SVG-фильтры
Нарисуем круг
<svg width="400" height="400">
<circle
cx="200"
cy="200"
fill="#3498db"
r="100"/>
</svg>
43
Это круг :)
44
Простейший 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
Простейший 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
Простейший 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
Простейший 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
Результат
49
Картинка внутри SVG
<svg width="1024" height="768">
<image
width="100%"
height="100%"
xlink:href="img/girl.jpg" />
</svg>
50
Картинка внутри 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
Комбинация фильтров
<filter id="f2">
<feGaussianBlur stdDeviation="3" />
<feColorMatrix type="saturate" values="0">
</feColorMatrix>
</filter>
54
Комбинация фильтров
<filter id="f2">
<feGaussianBlur result="a1" stdDeviation="3" />
<feColorMatrix type="saturate" values="0">
</feColorMatrix>
</filter>
55
Комбинация фильтров
<filter id="f2">
<feGaussianBlur result="a1" stdDeviation="3" />
<feColorMatrix in="a1" type="saturate" values="0">
</feColorMatrix>
</filter>
56
Комбинация фильтров
<filter id="f2">
<feGaussianBlur result="a1" stdDeviation="3" />
<feColorMatrix in="a1" type="saturate" values="0">
</feColorMatrix>
</filter>
57
Типы SVG-фильтров
<fe…Фильтр>
feComponentTransfer
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
feComponentTransfer
<feComponentTransfer>
<feFuncA type="linear" slope="0.5"/>
</feComponentTransfer>
63
feComponentTransfer
<feComponentTransfer>
<feFuncR type="linear" slope="0"/>
<feFuncG type="linear" slope="0"/>
<feFuncB type="linear" slope="1"/>
</feComponentTransfer>
65
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
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
feComponentTransfer
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"/>
<feFuncG type="table" tableValues="1 0"/>
<feFuncB type="table" tableValues="1 0"/>
</feComponentTransfer>
71
feComponentTransfer
<feComponentTransfer>
<feFuncR
type="gamma"
amplitude="2"
exponent="0.5"
offset="0.2"
/>
</feComponentTransfer>
73
feColorMatrix
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
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
Умножать на матрицу, что-бысделать картинку чёрно-белой? о_О
<feColorMatrix type="saturate" values="0" />
<feColorMatrix type="saturate" values="4" />
<feColorMatrix type="saturate" values="50" />
<feColorMatrix type="hueRotate" values="0" />
<feColorMatrix type="hueRotate" values="120" />
<feColorMatrix type="hueRotate" values="240" />
<feColorMatrix type="hueRotate" values="320" />
<feColorMatrix type="luminanceToAlpha" />
feConvolveMatrix
feConvolveMatrix
<feConvolveMatrix order="3"
kernelMatrix="1 ‐1 1 ‐1 ‐1 ‐1 1 ‐1 1"/>
1 ‐1 1
‐1 ‐1 ‐1
1 ‐1 1
91
Classic #selfish #duckface
Fixed #selfish #duckface
<feConvolveMatrix order="3"
kernelMatrix="1 ‐1 1 ‐1 ‐0.1 ‐1 1 ‐1 1"/>
<feConvolveMatrix order="3"
kernelMatrix="9 0 0 0 1 0 0 0 ‐9"/>
<feConvolveMatrix order="3"
kernelMatrix="‐1 ‐1 ‐1 ‐1 7 ‐1 ‐1 ‐1 ‐1"/>
<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"/>
feComposite
feComposite
<feComposite
in="source1"
in2="source2"
operator="xor"/>
99
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
feBlend
feBlend
<feBlend
in="source1"
in2="source2"
mode="lighten"/>
102
Blend modes
normal
screen
multiply
lighten
darken
103
feTile
feTile
<feTile in="source" />
105
feDisplacementMap
feDisplacementMap
109
feDisplacementMap
110
Красный канал. 20 градусов
111
Cиний канал. -20 градусов
112
+ Неподвижный зеленый
113
Happy face
114
Happy face
115
Happy face lvl 40
116
Happy face lvl80
117
Возможностианимации
Синтаксис для SVG анимаций
<feColorMatrix type="saturate" values="0.2">
</feColorMatrix>
119
Синтаксис для SVG анимаций
<feColorMatrix type="saturate" values="0.2">
<animate attributeName="values" />
</feColorMatrix>
120
Синтаксис для SVG анимаций
<feColorMatrix type="saturate" values="0.2">
<animate attributeName="values" />
</feColorMatrix>
121
Синтаксис для SVG анимаций
<feColorMatrix type="saturate" values="0.2">
<animate
attributeName="values"
values="0;5;0"
dur="2s"
repeatCount="indefinite"/>
</feColorMatrix>
122
Анимация feColorMatrix
123
Анимация feMorphology radius
124
Анимация feDisplacementMap scale
125
Немного хипстерствадля примера
Достоинства SVG-фильтров ипочему мы выбрали их
1. Быстрые.
2. Не нужно никаких дополнительных библиотек.
3. Поддержка разветвленных структур.
4. Cупер-возможности, огромная спецификация.
5. Встроенная поддержка анимаций.
6. Возможность фильтрации картинок с любых
доменов.
138
Недостатки SVG-фильтров
1. IE10+, встроенный браузер на Android 4.4+
2. Необходимость вкладывать изображение
внуть SVG
139
SVG-фильтрыдля html
<svg>
<defs>
<filter id="f1">
<feGaussianBlur stdDeviation="10"/>
</filter>
</defs>
</svg>
img {
‐webkit‐filter: url(#f1);
filter: url(#f1);
}
141
<svg>
<defs>
<filter id="f1">
<feGaussianBlur stdDeviation="10 0"/>
</filter>
</defs>
</svg>
div {
‐webkit‐filter: url(#f1);
filter: url(#f1);
}
142
Вопросы?
facebook.com/html5by
twitter.com/html5by
vk.com/html5by
146