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