Halftone plugin for jQuery
Halftone.js
Wow! How cool is that?
We know what you're thinking, "I've always wanted to create halftones with jQuery!" Well stop thinking, because now you can.
Idiomatic jQuery integration
The halftone() function returns a valid jQuery object and is completely chainable.
Easy to install, Easy to use
just include jquery-halftone in your page after a recent (1.7+) version of the jQuery library and you're ready to go .
Run our Test Suite
Configuration
The Halftone method can be called on any canvas element with the following syntax:
$('.canvas-element').halftone({ [configuration] });
Options
You may set options with each call to the halftone method, or globally, using the halftone.defaults object:
$.fn.halftone.defaults.background = "#adadad" ;
| Name | Type | Default | Description |
|---|---|---|---|
| background | string | #000000 | Sets the background colour for the halftone |
| color | string | #ffffff | Sets the foreground colour for the halftone |
| sample | string | 8 | size of sample unit used to calculate the halftone |
| luminosity | string | Standard | Sets the algorithm to use to calculate the luminosity in the sample image. Options are "Standard", "Mean", "PerceivedA" and "PerceivedB". |
| topleft | Array | [0,0] | top left corner of sample area position, default is 0,0 |
| bottomright | Array | [image width,image height] | bottom right corner of sample area position, if left unset, the bottom right corner of the canvas itself will be used. |
| zoomfactor | string | Null | 0 to expand the halftone image to fill all available space. Other values currently unsupported. |
Example
Set up a Canvas element, draw a gradient in it and convert it to a halftone
<canvas id="canvas-test" width="200" height"300" >
Unsupported HTML5 canvas tag.
</canvas>Javascript:
//write a gradient into the canvas so we have some image data to process...
var c=document.getElementById("canvas-test");
var ctx=c.getContext("2d");
var grad=ctx.createLinearGradient(0,0,170,0);
grad.addColorStop(0,"#000");
grad.addColorStop(1,"#fff");
ctx.fillStyle=grad;
ctx.fillRect(0,0,300,200);
//Do the halftone
$('#canvas-test').halftone({
'sample' : 7,
'background' : '#000000'
});