jQuery Image Halftone

Feb 24, 2013 in jQuery, Javascript

Below is javascript implementation of Floyd-Steinberg dithering algorithm to convert image into two-color (black and white) version. I wrapped the code in form of jQuery plugin however it can be extracted to to separate function.

Options

The list of possible settings includes:

• radius: [Integer: 1] Number of pixels per dot.
• output: [String: "canvas"] Type of resulting image. Can be: canvas - original image is replaced with canvas element, image - original image is replaced with a new image.
• target: [String: null] CSS selector of the container to append new converted image (or canvas) to. Original image will not be replaced. If target is a function then it is called with new image passed as argument.
• grayscale: [Boolean: false] Just convert image to grayscale.
• addCSS: [Object: {}] CSS properties to be added to the image or canvas.
• addClass: [String: null] Class name to be added.

Usage example

Here is a some possible usage example:

$('#image').imageHalftone({
    output: 'image'
});

The example above will process image with id image and replace it with new converted version (image).

$('#image').imageHalftone({
    output: 'image',
    target: function($new) {
        $new.appendTo('body');
    }
});

This example with not replace original image but instead will append new image to body.

Demonstration

comments powered by Disqus