Canvas Dither
Description
Simple demo of image processing in Javascript using HTML5 and Canvas.
Recent Changes
- Includes a timer for performance testing
- Now able to dither/process each channel (R, G and B) separately, producing interesting effects
- Now allows for choosing your own image to process
- Moved processing to a Web Worker
- Now able to output images in three different formats! (Assuming your browser supports it)
- Renders to an
<img>element rather than just to a canvas - Can filter pixels using a simple threshold as well as Atkinson dithering (which, obviously, is what you're here for)
Future Plans
- Create fallback for when web workers are not available
- Enable drag-and-drop custom image selection
- Improve compatibility
- Probably going to re-style to look more like classic Mac OS (currently borrows a lot of design language and ideas from OS X, like fractal-thing.)
Version History
v1.0
- Full implementation of algorithm in main JS thread
- Renders to an
<img>element
v2.0
- Moved to Web Workers
v3.0
- Allowed custom image uploads
- Deal more effectively with large/broken/invalid images
v3.1
- Enabled processing each channel separately, all required channels are processed in one pass
- Tidied up some stuff, made JS create its canvas itself and render off screen
- Added timers for performance testing
Notes
Takes a lot of learned stuff from my fractal-thing project (and improves on it significantly).
Example image is by Keven Law, and sourced from flickr. Image is licensed under Creative Commons Attribution-ShareAlike 2.0 Generic.