So far I was able to apply CSS3 and svg filters to make the whole image sepia or black and white but, I want to substitute just one color on real time.
I was able to do this using Flash very easily but I can not find how to do it using HTML5
Asked
Active
Viewed 138 times
0
-
The introduced problem was different, but the core was your question, and you'll find an working example in this possible duplicate : [How to reduce getImageData's memory usage when using canvas to edit video?](http://stackoverflow.com/questions/33687775/how-to-reduce-getimagedatas-memory-usage-when-using-canvas-to-edit-video). – Kaiido May 06 '17 at 14:01
-
Realtime? 30, 50, 60fps? Low res, 1080 HD, 4K UHD? On every machine under the sun or only overclocked water cooled desktops? You have two options. Bottom end of above requirements. 2D API `getImageData` and pixel by pixel replace RGB values with new values (note no HSL color model). For the top end (and totally covers the bottom) you will need to use WebGL. Any sort of color model you want will work fine, but peak performance will vary significantly between machines. (optional 3rd option mid range) WASM modal to process the 2D API imgData array (browser support? OK) speed 20~40% better than JS – Blindman67 May 06 '17 at 15:32