InstaPIXEL is a jQuery plugin that will pixelate an image to an HTML5 canvas element at a given size. Maybe use it to generate high-res abstract art, or what about a resolution-neutral design element or perhaps as a tool to create baseline 2D art assets for 8-bit style games. Your call, friend!
Grab the single jquery.instapixel.js file and get going! Here, this should get you started:
$('#myCanvas').instapixel({
'imgURL' : 'fooBar.png'
});
Please View, Fork, or Star the source on GitHub if you feel so compelled. Feel free to report issues, bugfixes, or feature requests, too. And share your designs with the rest of us on Twitter using @theLucre or #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 |