Skip to content

thelucre/instapixel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 

Repository files navigation

InstaPIXEL jQuery Plugin

For ye, of 8-bit persuasion

http://thelucre.github.io/instapixel/

Basic Usage

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();
});

Options

NameValuesDefaultDescription
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

Methods

NameSignatureReturn ValueDescription
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

Event Triggers

NameDescription
'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

About

[jQuery] pixelate an image to a canvas

Resources

Stars

Watchers

Forks

Packages

No packages published