HTML5 Photo Filters
HTML5 can alter pixel information. This project is an attempt to experiment with those manipulations.
Download the source code here: main.js
Filter #1) A Threshold filter- renders any color below the low threshold as black and any color above the high threshold as white.
Filter #2) A Color filter- adds extra color information to the image.
Filter #3) A Saturation filter- multiplies existing color information.
Filter #4) A Contrast filter- lightens some parts of an image while darkening others to create a more pronounced difference between shades.
Filter #5) A Twirl filter- spirals the picture data.
Filter #6) A Blur filter- uses nearby image data to soften the image.
Things that work well:
- Page UI: Sliders allow for fine tuning of effects.
- Buttons: Simply highlights one-time effects.
- Successive Filter Application: Some filters can be applied one after another.
Things I'd like to impove:
- Performance: Adding too many filter effects bogs the system down terribly.
- Color Booster Effect: It unintuitively adds color information.
- Threshold Filter: Requires a temporary hold on the previous image's data and thus cannot be applied at the same time as the twirl.
- Twirl Filter: Same problem as threshold. Also, it cannot be reset to zero to undo the effect.
- Import Other Images: This was a technical limitation. At the time, HTML5 CANVAS cannot do this without corrupting the image data. I wrote the code to load images in, but you couldn't manipulate them in any way.