🖼 Simple demo of image processing in Javascript using HTML5 and Canvas
JavaScript HTML CSS
Switch branches/tags
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
canvas-image-worker.js
canvas-image.js
index.html
readme.md
style.css
target.jpg

readme.md

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.