instapixel.min.js

(function($){$.instapixel=function(element,options){var INSTAPIXEL="InstaPIXEL",MSG_TYPE_ERROR="ERROR",MSG_TYPE_INFO="INFO",MSG_NOT_CANVAS_ELEMENT="The element is not of type <CANVAS>",MSG_INSTAPIXEL_STARTED="InstaPIXEL plugin started on element.",MSG_IMAGE_LOAD_ATTEMPT="Attempting to load image.",MSG_IMAGE_LOAD_ERROR="Image could not be loaded.",MSG_IMAGE_LOADED="Image successfully loaded.",MSG_CANVAS_NOT_SUPPORTED="The <CANVAS> element is not supported in this browser.",MSG_IMAGE_PATH_INVALID="Image path is not in a valid format.",MSG_NO_IMAGE_LOADED="No image has been loaded to the InstaPIXEL object.",MSG_HI_RES_OUTPUT_INVALID="Hi res processing aborted, image size may be too large for browser.",MSG_HI_RES_OUTPUT_REQUESTED="Hi res output Image object requested.",MSG_HI_RES_OUTPUT_DELIVERED="Hi res output Image object successfully rendered.",MSG_SIZE_SET_TOOSMALL="Set size too low. Defaulting size to 1.",MSG_SIZE_SET_TOOLARGE="Set size larger than canvas. Defaulting to max available.",MSG_SIZE_SET_SUCCESS="Pixel size set.",MSG_PIXEL_DATA_PARSING="Attempting to parse pixel data to array.",MSG_PIXEL_DATA_PARSED="Pixel data parsed to array.",MSG_DRAWING_TO_CANVAS="Drawing to canvas element.",MSG_HI_RES_SIZE_INVALID="Output size not a number, zero, or negative number.",MSG_CANVAS_CLEARED="Canvas pixels have been cleared.",MSG_CANVAS_RESIZED="Canvas resized.",MSG_IMAGE_DIMENSIONS="Original image dimensions read.",MSG_IMAGE_SET="Image set.",HI_RES_DPI_CONVERSION=300/72;var image,ctx,canv,tmpcanv,tmpctx,pix,_size,_imgURL;var defaults={debug:true,imgURL:".jpg",pixelSize:10,resizeCanvas:false,trueSquare:false};var plugin=this;plugin.settings={};var $element=$(element),element=element;plugin.init=function(){plugin.settings=$.extend({},defaults,options);message(MSG_TYPE_INFO,MSG_INSTAPIXEL_STARTED,this.selector);if(!meetsRequirements()){return}canv=element;ctx=canv.getContext("2d");tmpcanv=$(element).clone()[0];tmpctx=tmpcanv.getContext("2d");plugin.setSize(plugin.settings.pixelSize);plugin.setImage(plugin.settings.imgURL);loadImage(plugin._imgURL)};plugin.redraw=function(options){if(options.resize){plugin.resizeCanvas()}if(options.size){if(!plugin.setSize(size))return false}var pixelData=drawPixelatedToCanvas();if(pixelData){ctx.putImageData(pixelData,0,0);return true}else{return false}};plugin.clear=function(){canv.width=canv.width;message(MSG_TYPE_INFO,MSG_CANVAS_CLEARED)};plugin.output=function(inches){message(MSG_TYPE_INFO,MSG_HI_RES_OUTPUT_REQUESTED,inches+" inches");$(element).trigger("hiResProcessing");var pixelData=drawPixelatedToCanvas(inches);var hiResCanvas=document.createElement("canvas"),hiResCtx=hiResCanvas.getContext("2d");if(!pixelData||!pixelData.width||!pixelData.height){message(MSG_TYPE_ERROR,MSG_HI_RES_OUTPUT_INVALID,inches+" inches requested");return}hiResCanvas.width=pixelData.width;hiResCanvas.height=pixelData.height;hiResCtx.putImageData(pixelData,0,0);var dataURL=hiResCanvas.toDataURL("image/png");message(MSG_TYPE_INFO,MSG_HI_RES_OUTPUT_DELIVERED,inches+" inches");$(element).trigger("hiResProcessed");return dataURL};plugin.resizeCanvas=function(){resizeCanvases();getPixelDataArray()};var getPixelDataArray=function(){message(MSG_TYPE_INFO,MSG_PIXEL_DATA_PARSING);$(element).trigger("imageParsing");var imageData=tmpctx.getImageData(0,0,tmpcanv.width,tmpcanv.height);var data=imageData.data;pix={};for(var y=0;y<tmpcanv.height;y++){pix[y]={};for(var x=0;x<tmpcanv.width;x++){var red=data[(tmpcanv.width*y+x)*4];var green=data[(tmpcanv.width*y+x)*4+1];var blue=data[(tmpcanv.width*y+x)*4+2];pix[y][x]="rgb("+red+","+green+","+blue+")"}}message(MSG_TYPE_INFO,MSG_PIXEL_DATA_PARSED)};var drawPixelatedToCanvas=function(inches){if(typeof pix===undefined||!pix){message(MSG_TYPE_ERROR,MSG_NO_IMAGE_LOADED);return}message(MSG_TYPE_INFO,MSG_DRAWING_TO_CANVAS);var newcanv=document.createElement("canvas");var newctx=newcanv.getContext("2d");var canvScale;var tileSize=plugin.getSize();var canvTile=tileSize;console.log(tmpcanv);console.log(canv);console.log(newcanv);if(inches){if(isNaN(inches)||inches<=0){message(MSG_TYPE_ERROR,MSG_HI_RES_SIZE_INVALID);return false}newcanv.width=inches/(canv.width/72)*canv.width*HI_RES_DPI_CONVERSION;newcanv.height=inches*(canv.height/canv.width)/(canv.width/72)*canv.width*HI_RES_DPI_CONVERSION;canvScale=newcanv.width/canv.width;canvTile*=canvScale}else{newcanv.width=canv.width;newcanv.height=canv.height;canvScale=canv.width/tmpcanv.width}var tiles={x:Math.floor(newcanv.width/canvTile),y:Math.floor(newcanv.height/canvTile)};if(plugin.settings.trueSquare){var pad={x:0,y:0};var padamt=pad}else{var pad={x:Math.floor(newcanv.width%canvTile),y:Math.floor(newcanv.height%canvTile)};var padamt={x:pad.x/tiles.x,y:pad.y/tiles.y}}for(var x=0;x<tiles.x;x++){for(var y=0;y<tiles.y;y++){var colorCoords={x:Math.floor(x*tileSize+tileSize/2),y:Math.floor(y*tileSize+tileSize/2)};if(colorCoords.x<0)colorCoords.x=0;if(colorCoords.y<0)colorCoords.y=0;if(colorCoords.x>newcanv.width-1)colorCoords.x=newcanv.width-1;if(colorCoords.y>newcanv.height-1)colorCoords.y=newcanv.height-1;if(pix[colorCoords.y]&&pix[colorCoords.y][colorCoords.x]){newctx.fillStyle=pix[colorCoords.y][colorCoords.x];newctx.fillRect(Math.floor(x*canvTile+x*padamt.x),Math.floor(y*canvTile+y*padamt.y),Math.floor(x*canvTile+x*padamt.x+canvTile+padamt.x),Math.floor(y*canvTile+canvTile+padamt.y))}}}var pixelData=newctx.getImageData(0,0,newcanv.width,newcanv.height);$(element).trigger("imageParsed");return pixelData};var loadImage=function(imgURL){image=new Image;image.onload=function(){if("naturalHeight"in this){if(this.naturalHeight+this.naturalWidth===0){this.onerror();return}}else if(this.width+this.height==0){this.onerror();return}message(MSG_TYPE_INFO,MSG_IMAGE_LOADED,this.src);$(element).trigger("imageLoaded",true);resizeCanvases();getPixelDataArray();plugin.redraw(plugin.getSize())};image.onerror=function(){message(MSG_TYPE_ERROR,MSG_IMAGE_LOAD_ERROR,this.src);$(element).trigger("imageLoaded",false)};image.src=imgURL;message(MSG_TYPE_INFO,MSG_IMAGE_LOAD_ATTEMPT,image.src)};var message=function(type,msg,info){if(plugin.settings.debug){info?info=" [ "+info+" ] ":info="";console.log(INSTAPIXEL+" "+type+" : "+msg+info)}};var isCanvasSupported=function(){var elem=document.createElement("canvas");return!!(elem.getContext&&elem.getContext("2d"))};var resizeCanvases=function(){if(plugin.settings.resizeCanvas){canv.width=image.width;canv.height=image.height;message(MSG_TYPE_INFO,MSG_CANVAS_RESIZED,canv.width+" x "+canv.height)}console.log(canv);tmpcanv.width=canv.width;tmpcanv.height=canv.height;console.log("resize");console.log(tmpcanv);console.log(canv);tmpctx.drawImage(image,0,0,canv.width,canv.height);message(MSG_TYPE_INFO,MSG_IMAGE_DIMENSIONS,image.width+" x "+image.height)};var meetsRequirements=function(){if(!isCanvasSupported()){message(MSG_TYPE_ERROR,MSG_CANVAS_NOT_SUPPORTED);return false}if(!$(element).is("canvas")){message(MSG_TYPE_ERROR,MSG_NOT_CANVAS_ELEMENT);return false}return true};plugin.getSize=function(){return plugin._size};plugin.setSize=function(size){if(isNaN(size))return false;if(size<=0){message(MSG_TYPE_INFO,MSG_SIZE_SET_TOOSMALL,size);size=1}if(size>canv.width){message(MSG_TYPE_INFO,MSG_SIZE_SET_TOOLARGE,size);size=canv.width}if(size>canv.height){message(MSG_TYPE_INFO,MSG_SIZE_SET_TOOLARGE,size);size=canv.height}plugin._size=Math.floor(size);message(MSG_TYPE_INFO,MSG_SIZE_SET_SUCCESS,size);return true};plugin.setImage=function(imgURL,redraw){if(imgURL==""||imgURL===undefined){message(MSG_TYPE_ERROR,MSG_IMAGE_PATH_INVALID,imgURL);return}plugin._imgURL=imgURL;message(MSG_TYPE_INFO,MSG_IMAGE_SET,imgURL);if(redraw){loadImage(imgURL)}};plugin.getImage=function(){return plugin._imgURL};plugin.init()};$.fn.instapixel=function(options){return this.each(function(){if(undefined==$(this).data("instapixel")){var plugin=new $.instapixel(this,options);$(this).data("instapixel",plugin)}})}})(jQuery);