For ye, of 8-bit persuasion
http://thelucre.github.io/instapixel/
This plugin will pixelate the attached canvas with any image. Simply call the plugin function from your canvas element and send an image URL as a parameter:
$('#mycanvas').instapixel( { 'imgURL': 'foobar.jpg' } );
The plugin is stateful, so you only need to call it once. After the initial call, use the data attribute to interact with the plugin:
$('#mycanvas').data('instapixel').redraw();
One awesome feature is hi-res output. You can have your very own 8-bit abstract art at 12" wide x 300dpi using:
var myDataURL = $('#mycanvas').data('instapixel').output( 12 );
Perhaps you should hide the loader when the processing is complete (the big images can take a bit...)
$('#mycanvas').on("hiResProcessed", function() {
$('#loader').fadeOut();
});
| Name | Values | Default | Description |
|---|---|---|---|
| imgURL | any image url string | '.jpg' | The image to be loaded and pixelated onto the canvas |
| debug | true / false | true | Debug mode will output all these great messages to the console |
| pixelSize | any integer > 0 | 10 | The pixelation size drawn, relative to the original image size |
| resizeCanvas | true / false | false | If true, the canvas element will resize to the original image dimensions |
| trueSquare | true / false | false | If true, square pixels will be padded to fit the canvas just right |
| Name | Signature | Return Value | Description |
|---|---|---|---|
| setSize | ( int size ) | bool for success/fail | set pixel size to draw. does not redraw |
| getSize | none | int size | gets the current pixel size being drawn |
| setImage | ( str url, [bool redraw] | none | set the image to pixelate. pass true to redraw after async image load |
| getImage | none | str url | returns the currently drawn image |
| redraw | ( [int size] ) | bool for success/fail | redraw the pixelated canvas. optional size setting parameter |
| clear | none | none | clears the parent canvas element |
| output | ( float inches ) | dataURL of canvas | returns a dataURL image of the current canvas scaled to the number of inches passed (relative to width) @ 300dpi |
| Name | Description |
|---|---|
| 'imageLoaded' | the image has been loaded to memory, check parameter success to confirm |
| 'imageLoading' | the plugin has started loading the current image |
| 'imageParsing' | the image pixels are being parsed |
| 'imageParsed' | the image pixels have been parsed |
| 'hiResProcessing' | the hi res version of being built into a new dataURL image |
| 'hiResProcessed' | the hi res image version has been processed into a new dataURL image |