GitXplorerGitXplorer
t

canvas-dither

public
52 stars
9 forks
1 issues

Commits

List of commits on branch gh-pages.
Unverified
e09eac26a1ef4be608affe36554b39ce4f609676

Implemented timer to test performance of algorithm changes. Should be smart enough to disable itself where it's not supported.

tticky committed 13 years ago
Unverified
094df60860573818e2b8838b0f5be0c571baeee6

Attempting to improve atkinson algorithm to make it always process image in a single pass.

tticky committed 13 years ago
Unverified
79ff90bbb0f52143c4852337a75adafda9de74c8

Fix for bug introduced in last commit. Oops.

tticky committed 13 years ago
Unverified
81894282fa87e80e8e79584770f5c18994aea680

Removed canvas from HTML page, made javascript create an offscreen canvas for itself. Some alignment changes and layout changes.

tticky committed 13 years ago
Unverified
469fa1decb42aaf3939da2d2ebcb8945c82f4021

Removed commented code from canvas-image-worker.

tticky committed 13 years ago
Unverified
b95c503429d62614e046da70f4fe63bcf3d98f11

Allowed disabling greyscale conversion, and made it processes each RGB channel individually. This produces some interesting effects.

tticky committed 13 years ago

README

The README file for this repository.

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.