pixelator.min.js

/**
 * Pixelator is an open source library that allows you to
 * generate a HTML-only image from an image format (PNG, JPEG etc).
 * 
 * @version     1.0
 * @author      Gecko
 * @git-source  https://github.com/g3x0/pixelator/
 */

function Pixelator(){}Pixelator.prototype={getImageData:function(e){var t=document.createElement("canvas");t.width=e.width;t.height=e.height;var n=t.getContext("2d");n.drawImage(e,0,0);return n.getImageData(0,0,e.width,e.height)},getPixel:function(e,t,n){var r=(t+e.width*n)*4,i=e.data;return{r:i[r],g:i[r+1],b:i[r+2],a:i[r+3]}},pixelate:function(e){var t,n,r,i,s,o,u,a,f,l,c,h;var p=new Image;if(e["image"])p.src=e["image"];else{console.log('Warning! You need to specify an image source via the "image" parameter.');return false}if(e["target"])h=e["target"];else{console.log('Warning! You need to specify a HTML element where you want to insert the processed image via the "target" parameter.');return false}t=e["res"]?e["res"]:false;if(t)i=parseInt(t);else{if(e["width"])i=parseInt(e["width"]);else if(!e["height"]){console.log('Warning! You need to specify a "res" or "width" value.');return false}}s=e["height"]?parseInt(e["height"]):i;f={width:i,height:s};n=e["type"]?e["type"]:false;m=e["source"]?e["source"]:false;u=e["offset"]?e["offset"]:false;l=e["newWidth"]?parseInt(e["newWidth"]):false;c=e["newHeight"]?parseInt(e["newHeight"]):false;if(!i)i=s;if(n){switch(n){case"v":case"vertical":document.querySelector(h).style.height=(c?c:p.height)+"px";for(var d=0;d<p.width;d+=f["height"]){i=d+i>p.width?p.width-(d-f["height"]+i):i;a=this.getImageData(p);r=this.getPixel(a,d,u?u:0);o=document.createElement("div");o.innerHTML="";o.style.width=i+"px";o.style.height="100%";o.style.display="inline-block";o.style.background="rgba("+r["r"]+","+r["g"]+","+r["b"]+","+r["a"]+")";o.style.overflow="hidden";document.querySelector(h).appendChild(o)}break;case"h":case"horizontal":document.querySelector(h).style.width=(l?l:p.width)+"px";for(var d=0;d<p.height;d+=f["height"]){s=d+s>p.height?p.height-(d-f["height"]+s):s;a=this.getImageData(p);r=this.getPixel(a,u?u:0,d);o=document.createElement("div");o.innerHTML="";o.style.width="100%";o.style.height=i+"px";o.style.display="inline-block";o.style.background="rgba("+r["r"]+","+r["g"]+","+r["b"]+","+r["a"]+")";o.style.overflow="hidden";document.querySelector(h).appendChild(o);o=document.createElement("div");o.style.clear="both";document.querySelector(h).appendChild(o)}break}}else{for(var d=0;d<p.height;d+=f["height"]){s=d+s>p.height?p.height-(d-f["height"]+s):s;for(var v=0;v<p.width;v+=f["width"]){i=v+i>p.width?p.width-(v-f["width"]+i):i;a=this.getImageData(p);r=this.getPixel(a,v,d);o=document.createElement("div");o.innerHTML="";o.style.width=i+"px";o.style.height=(s?s:i)+"px";o.style.display="inline-block";o.style.background="rgba("+r["r"]+","+r["g"]+","+r["b"]+","+r["a"]+")";o.style.overflow="hidden";document.querySelector(h).appendChild(o)}i=f["width"];o=document.createElement("div");o.style.clear="both";document.querySelector(h).appendChild(o)}}if(m){var m=document.createElement("p");m.innerHTML="Source code: ";document.querySelector(h).parentNode.appendChild(m);var g="";var y=document.querySelector(h).tagName.toLowerCase();var b=document.querySelector(h),w=b.attributes,d=w.length;while(d--)g+=" "+w[d].name+'="'+w[d].value+'"';m=document.createElement("textarea");g="<"+y+g+">"+document.querySelector(h).innerHTML+"</"+y+">";m.innerHTML=g;m.style.width=document.querySelector(h).offsetWidth+"px";m.style.height="100px";m.style.clear="both";document.querySelector(h).parentNode.appendChild(m)}return 0}}