From cb2a74e62fe003817199a070e2b53694b40336c4 Mon Sep 17 00:00:00 2001
From: giventofly <hello@josemoreira.pt>
Date: Mon, 19 Apr 2021 15:49:12 +0100
Subject: [PATCH] fix scale  and temp canvas size for bigger images

---
 dist/pixelit.js        | 39 ++++++++++++++++++++++++---------------
 dist/pixelitmin.js     |  2 +-
 docs/assets/main.js    | 12 +++++++-----
 docs/assets/mainmin.js |  2 +-
 docs/index.html        | 15 ++++++++++++---
 5 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/dist/pixelit.js b/dist/pixelit.js
index 7de96ac..ff9738f 100644
--- a/dist/pixelit.js
+++ b/dist/pixelit.js
@@ -159,27 +159,36 @@ class pixelit {
    * Draws a pixelated version of an image in a given canvas
    */
   pixelate() {
-    this.drawto.width = this.drawfrom.width;
-    this.drawto.height = this.drawfrom.height;
-
-    const scaledW = this.drawto.width * this.scale;
-    const scaledH = this.drawto.height * this.scale;
-
-    //var ctx = canvas.getContext("2d");
-
-    this.ctx.mozImageSmoothingEnabled = false;
-    this.ctx.webkitImageSmoothingEnabled = false;
-    this.ctx.imageSmoothingEnabled = false;
+    this.drawto.width = this.drawfrom.naturalWidth;
+    this.drawto.height = this.drawfrom.naturalHeight;
 
-    //previous method, would failt for background transparent images
-    //this.ctx.drawImage(this.drawfrom, 0, 0, scaledW, scaledH);
+    let scaledW = this.drawto.width * this.scale;
+    let scaledH = this.drawto.height * this.scale;
 
     //make temporary canvas to make new scaled copy
     const tempCanvas = document.createElement("canvas");
+
+    //corner case of bigger images, increase the temporary canvas size to fit everything
+    if(this.drawto.width > 800 || this.drawto.width > 800 ){
+      //fix sclae to pixelate bigger images
+      this.scale *= 0.25;
+      scaledW = this.drawto.width * this.scale;
+      scaledH = this.drawto.height * this.scale;
+      //make it big enough to fit
+      tempCanvas.width = Math.max(scaledW, scaledH ) + 50;
+      tempCanvas.height = Math.max(scaledW, scaledH ) + 50;
+    }
     // get the context
     const tempContext = tempCanvas.getContext("2d");
     // draw the image into the canvas
     tempContext.drawImage(this.drawfrom, 0, 0, scaledW, scaledH);
+    document.body.appendChild(tempCanvas);
+
+    //configs to pixelate
+    this.ctx.mozImageSmoothingEnabled = false;
+    this.ctx.webkitImageSmoothingEnabled = false;
+    this.ctx.imageSmoothingEnabled = false;
+
     //draw to final canvas
     this.ctx.drawImage(
       tempCanvas,
@@ -189,8 +198,8 @@ class pixelit {
       scaledH,
       0,
       0,
-      this.drawfrom.width,
-      this.drawfrom.height
+      this.drawfrom.naturalWidth,
+      this.drawfrom.naturalHeight
     );
     //remove temp element
     tempCanvas.remove();
diff --git a/dist/pixelitmin.js b/dist/pixelitmin.js
index e442b71..8d6c973 100644
--- a/dist/pixelitmin.js
+++ b/dist/pixelitmin.js
@@ -2,4 +2,4 @@
  * pixelit - convert an image to Pixel Art, with/out grayscale and based on a color palette.
  * @author José Moreira @ <https://github.com/giventofly/pixelit>
  **/
-"use strict";function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}function _createClass(t,e,i){return e&&_defineProperties(t.prototype,e),i&&_defineProperties(t,i),t}var pixelit=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};_classCallCheck(this,t),this.drawto=e.to||document.getElementById("pixelitcanvas"),this.drawfrom=e.from||document.getElementById("pixelitimg"),this.hideFromImg(),this.scale=e.scale&&e.scale>0&&e.scale<=50?.01*e.scale:.08,this.palette=e.palette||[[140,143,174],[88,69,99],[62,33,55],[154,99,72],[215,155,125],[245,237,186],[192,199,65],[100,125,52],[228,148,58],[157,48,59],[210,100,113],[112,55,127],[126,196,193],[52,133,157],[23,67,75],[31,14,28]],this.maxHeight=e.maxHeight,this.maxWidth=e.maxWidth,this.ctx=this.drawto.getContext("2d")}return _createClass(t,[{key:"hideFromImg",value:function(){return this.drawfrom.style.visibility="hidden",this.drawfrom.style.position="fixed",this.drawfrom.style.top=0,this.drawfrom.style.left=0,this}},{key:"setFromImgSource",value:function(t){return this.drawfrom.src=t,this}},{key:"setDrawFrom",value:function(t){return this.drawfrom=t,this}},{key:"setDrawTo",value:function(t){return this.drawto=t,this}},{key:"setPalette",value:function(t){return this.palette=t,this}},{key:"setMaxWidth",value:function(t){return this.maxWidth=t,this}},{key:"setMaxHeight",value:function(t){return this.maxHeight=t,this}},{key:"setScale",value:function(t){return this.scale=t>0&&t<=50?.01*t:.08,this}},{key:"getPalette",value:function(){return this.palette}},{key:"colorSim",value:function(t,e){var i,a,h=0;for(i=0,a=t.length;i<a;i++)h+=(t[i]-e[i])*(t[i]-e[i]);return Math.sqrt(h)}},{key:"similarColor",value:function(t){var e=this,i=[],a=this.colorSim(t,this.palette[0]);return this.palette.forEach((function(h){e.colorSim(t,h)<=a&&(i=h,a=e.colorSim(t,h))})),i}},{key:"pixelate",value:function(){this.drawto.width=this.drawfrom.width,this.drawto.height=this.drawfrom.height;var t=this.drawto.width*this.scale,e=this.drawto.height*this.scale;this.ctx.mozImageSmoothingEnabled=!1,this.ctx.webkitImageSmoothingEnabled=!1,this.ctx.imageSmoothingEnabled=!1;var i=document.createElement("canvas");return i.getContext("2d").drawImage(this.drawfrom,0,0,t,e),this.ctx.drawImage(i,0,0,t,e,0,0,this.drawfrom.width,this.drawfrom.height),i.remove(),this}},{key:"convertGrayscale",value:function(){for(var t=this.drawto.width,e=this.drawto.height,i=this.ctx.getImageData(0,0,t,e),a=0;a<i.height;a++)for(var h=0;h<i.width;h++){var r=4*a*i.width+4*h,s=(i.data[r]+i.data[r+1]+i.data[r+2])/3;i.data[r]=s,i.data[r+1]=s,i.data[r+2]=s}return this.ctx.putImageData(i,0,0,0,0,i.width,i.height),this}},{key:"convertPalette",value:function(){for(var t=this.drawto.width,e=this.drawto.height,i=this.ctx.getImageData(0,0,t,e),a=0;a<i.height;a++)for(var h=0;h<i.width;h++){var r=4*a*i.width+4*h,s=this.similarColor([i.data[r],i.data[r+1],i.data[r+2]]);i.data[r]=s[0],i.data[r+1]=s[1],i.data[r+2]=s[2]}return this.ctx.putImageData(i,0,0,0,0,i.width,i.height),this}},{key:"resizeImage",value:function(){var t=document.createElement("canvas"),e=t.getContext("2d"),i=1;return this.maxWidth||this.maxHeight?(this.maxWidth&&this.drawto.width>this.maxWidth&&(i=this.maxWidth/this.drawto.width),this.maxHeight&&this.drawto.height>this.maxHeight&&(i=this.maxHeight/this.drawto.height),t.width=this.drawto.width,t.height=this.drawto.height,e.drawImage(this.drawto,0,0),this.drawto.width=this.drawto.width*i,this.drawto.height=this.drawto.height*i,this.ctx.drawImage(t,0,0,t.width,t.height,0,0,this.drawto.width,this.drawto.height),this):0}},{key:"draw",value:function(){return this.drawto.width=this.drawfrom.width,this.drawto.height=this.drawfrom.height,this.ctx.drawImage(this.drawfrom,0,0),this.resizeImage(),this}},{key:"saveImage",value:function(){var t=document.createElement("a");t.download="pxArt.png",t.href=this.drawto.toDataURL("image/png").replace("image/png","image/octet-stream"),document.querySelector("body").appendChild(t),t.click(),document.querySelector("body").removeChild(t)}}]),t}();
\ No newline at end of file
+"use strict";function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}function _createClass(t,e,i){return e&&_defineProperties(t.prototype,e),i&&_defineProperties(t,i),t}var pixelit=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};_classCallCheck(this,t),this.drawto=e.to||document.getElementById("pixelitcanvas"),this.drawfrom=e.from||document.getElementById("pixelitimg"),this.hideFromImg(),this.scale=e.scale&&e.scale>0&&e.scale<=50?.01*e.scale:.08,this.palette=e.palette||[[140,143,174],[88,69,99],[62,33,55],[154,99,72],[215,155,125],[245,237,186],[192,199,65],[100,125,52],[228,148,58],[157,48,59],[210,100,113],[112,55,127],[126,196,193],[52,133,157],[23,67,75],[31,14,28]],this.maxHeight=e.maxHeight,this.maxWidth=e.maxWidth,this.ctx=this.drawto.getContext("2d")}return _createClass(t,[{key:"hideFromImg",value:function(){return this.drawfrom.style.visibility="hidden",this.drawfrom.style.position="fixed",this.drawfrom.style.top=0,this.drawfrom.style.left=0,this}},{key:"setFromImgSource",value:function(t){return this.drawfrom.src=t,this}},{key:"setDrawFrom",value:function(t){return this.drawfrom=t,this}},{key:"setDrawTo",value:function(t){return this.drawto=t,this}},{key:"setPalette",value:function(t){return this.palette=t,this}},{key:"setMaxWidth",value:function(t){return this.maxWidth=t,this}},{key:"setMaxHeight",value:function(t){return this.maxHeight=t,this}},{key:"setScale",value:function(t){return this.scale=t>0&&t<=50?.01*t:.08,this}},{key:"getPalette",value:function(){return this.palette}},{key:"colorSim",value:function(t,e){var i,a,h=0;for(i=0,a=t.length;i<a;i++)h+=(t[i]-e[i])*(t[i]-e[i]);return Math.sqrt(h)}},{key:"similarColor",value:function(t){var e=this,i=[],a=this.colorSim(t,this.palette[0]);return this.palette.forEach((function(h){e.colorSim(t,h)<=a&&(i=h,a=e.colorSim(t,h))})),i}},{key:"pixelate",value:function(){this.drawto.width=this.drawfrom.naturalWidth,this.drawto.height=this.drawfrom.naturalHeight;var t=this.drawto.width*this.scale,e=this.drawto.height*this.scale,i=document.createElement("canvas");return(this.drawto.width>800||this.drawto.width>800)&&(this.scale*=.25,t=this.drawto.width*this.scale,e=this.drawto.height*this.scale,i.width=Math.max(t,e)+50,i.height=Math.max(t,e)+50),i.getContext("2d").drawImage(this.drawfrom,0,0,t,e),document.body.appendChild(i),this.ctx.mozImageSmoothingEnabled=!1,this.ctx.webkitImageSmoothingEnabled=!1,this.ctx.imageSmoothingEnabled=!1,this.ctx.drawImage(i,0,0,t,e,0,0,this.drawfrom.naturalWidth,this.drawfrom.naturalHeight),i.remove(),this}},{key:"convertGrayscale",value:function(){for(var t=this.drawto.width,e=this.drawto.height,i=this.ctx.getImageData(0,0,t,e),a=0;a<i.height;a++)for(var h=0;h<i.width;h++){var r=4*a*i.width+4*h,s=(i.data[r]+i.data[r+1]+i.data[r+2])/3;i.data[r]=s,i.data[r+1]=s,i.data[r+2]=s}return this.ctx.putImageData(i,0,0,0,0,i.width,i.height),this}},{key:"convertPalette",value:function(){for(var t=this.drawto.width,e=this.drawto.height,i=this.ctx.getImageData(0,0,t,e),a=0;a<i.height;a++)for(var h=0;h<i.width;h++){var r=4*a*i.width+4*h,s=this.similarColor([i.data[r],i.data[r+1],i.data[r+2]]);i.data[r]=s[0],i.data[r+1]=s[1],i.data[r+2]=s[2]}return this.ctx.putImageData(i,0,0,0,0,i.width,i.height),this}},{key:"resizeImage",value:function(){var t=document.createElement("canvas"),e=t.getContext("2d"),i=1;return this.maxWidth||this.maxHeight?(this.maxWidth&&this.drawto.width>this.maxWidth&&(i=this.maxWidth/this.drawto.width),this.maxHeight&&this.drawto.height>this.maxHeight&&(i=this.maxHeight/this.drawto.height),t.width=this.drawto.width,t.height=this.drawto.height,e.drawImage(this.drawto,0,0),this.drawto.width=this.drawto.width*i,this.drawto.height=this.drawto.height*i,this.ctx.drawImage(t,0,0,t.width,t.height,0,0,this.drawto.width,this.drawto.height),this):0}},{key:"draw",value:function(){return this.drawto.width=this.drawfrom.width,this.drawto.height=this.drawfrom.height,this.ctx.drawImage(this.drawfrom,0,0),this.resizeImage(),this}},{key:"saveImage",value:function(){var t=document.createElement("a");t.download="pxArt.png",t.href=this.drawto.toDataURL("image/png").replace("image/png","image/octet-stream"),document.querySelector("body").appendChild(t),t.click(),document.querySelector("body").removeChild(t)}}]),t}();
\ No newline at end of file
diff --git a/docs/assets/main.js b/docs/assets/main.js
index 0832ccd..5f6d92a 100644
--- a/docs/assets/main.js
+++ b/docs/assets/main.js
@@ -130,18 +130,20 @@ document.addEventListener("DOMContentLoaded", function () {
     document.querySelector(".loader").classList.toggle("active");
     setTimeout(() => {
       document.querySelector(".loader").classList.toggle("active");
-    }, 500);
+    }, 1500);
     px
       .setScale(blocksize.value)
       .setPalette(paletteList[currentPalette])
       .draw()
       .pixelate();
-    greyscale.checked ? px.convertGrayscale() : null;
-    palette.checked ? px.convertPalette() : null;
-    maxheight.value ? px.setMaxHeight(maxheight.value).resizeImage() : null;
-    maxwidth.value ? px.setMaxWidth(maxwidth.value).resizeImage() : null;
+      
+      greyscale.checked ? px.convertGrayscale() : null;
+      palette.checked ? px.convertPalette() : null;
+      maxheight.value ? px.setMaxHeight(maxheight.value).resizeImage() : null;
+      maxwidth.value ? px.setMaxWidth(maxwidth.value).resizeImage() : null;
   };
 
+
   const makePaletteGradient = () => {
     //create palette
     let pdivs = "";
diff --git a/docs/assets/mainmin.js b/docs/assets/mainmin.js
index 37a7ca1..8cd3951 100644
--- a/docs/assets/mainmin.js
+++ b/docs/assets/mainmin.js
@@ -1 +1 @@
-"use strict";var px=new pixelit({from:document.getElementById("pixelitimg")}),paletteList=[[[13,43,69],[32,60,86],[84,78,104],[141,105,122],[208,129,89],[255,170,94],[255,212,163],[255,236,214]],[[48,0,48],[96,40,120],[248,144,32],[248,240,136]],[[26,28,44],[93,39,93],[177,62,83],[239,125,87],[255,205,117],[167,240,112],[56,183,100],[37,113,121],[41,54,111],[59,93,201],[65,166,246],[115,239,247],[244,244,244],[148,176,194],[86,108,134],[51,60,87]],[[44,33,55],[118,68,98],[237,180,161],[169,104,104]],[[7,5,5],[33,25,25],[82,58,42],[138,107,62],[193,156,77],[234,219,116],[160,179,53],[83,124,68],[66,60,86],[89,111,175],[107,185,182],[251,250,249],[184,170,176],[121,112,126],[148,91,40]],[[140,143,174],[88,69,99],[62,33,55],[154,99,72],[215,155,125],[245,237,186],[192,199,65],[100,125,52],[228,148,58],[157,48,59],[210,100,113],[112,55,127],[126,196,193],[52,133,157],[23,67,75],[31,14,28]],[[94,96,110],[34,52,209],[12,126,69],[68,170,204],[138,54,34],[235,138,96],[0,0,0],[92,46,120],[226,61,105],[170,92,61],[255,217,63],[181,181,181],[255,255,255]],[[21,25,26],[138,76,88],[217,98,117],[230,184,193],[69,107,115],[75,151,166],[165,189,194],[255,245,247]]],currentPalette=3,maxPalette=paletteList.length;document.addEventListener("DOMContentLoaded",(function(){document.getElementById("pixlInput").onchange=function(t){var c=new Image;c.src=URL.createObjectURL(this.files[0]),c.onload=function(){px.setFromImgSource(c.src),e()}};var e=function(){document.querySelector(".loader").classList.toggle("active"),setTimeout((function(){document.querySelector(".loader").classList.toggle("active")}),500),px.setScale(c.value).setPalette(paletteList[currentPalette]).draw().pixelate(),n.checked&&px.convertGrayscale(),a.checked&&px.convertPalette(),r.value&&px.setMaxHeight(r.value).resizeImage(),o.value&&px.setMaxWidth(o.value).resizeImage()},t=function(){document.querySelector("#palettecolor").innerHTML="",paletteList[currentPalette].forEach((function(e){var t=document.createElement("div");t.classList="colorblock",t.style.backgroundColor="rgba(".concat(e[0],",").concat(e[1],",").concat(e[2],",1)"),document.querySelector("#palettecolor").appendChild(t)}))};t();var c=document.querySelector("#blocksize");c.addEventListener("change",(function(t){document.querySelector("#blockvalue").innerText=this.value,e()}));var n=document.querySelector("#greyscale");n.addEventListener("change",e);var a=document.querySelector("#palette");a.addEventListener("change",e);var r=document.querySelector("#maxheight");r.addEventListener("change",e);var o=document.querySelector("#maxwidth");o.addEventListener("change",e),document.querySelector("#changepalette").addEventListener("click",(function(c){currentPalette>0?currentPalette--:currentPalette=maxPalette-1,t(),a.checked=!0,e()})),document.querySelector("#downloadimage").addEventListener("click",(function(e){px.saveImage()})),e()}));
\ No newline at end of file
+"use strict";var px=new pixelit({from:document.getElementById("pixelitimg")}),paletteList=[[[13,43,69],[32,60,86],[84,78,104],[141,105,122],[208,129,89],[255,170,94],[255,212,163],[255,236,214]],[[48,0,48],[96,40,120],[248,144,32],[248,240,136]],[[26,28,44],[93,39,93],[177,62,83],[239,125,87],[255,205,117],[167,240,112],[56,183,100],[37,113,121],[41,54,111],[59,93,201],[65,166,246],[115,239,247],[244,244,244],[148,176,194],[86,108,134],[51,60,87]],[[44,33,55],[118,68,98],[237,180,161],[169,104,104]],[[7,5,5],[33,25,25],[82,58,42],[138,107,62],[193,156,77],[234,219,116],[160,179,53],[83,124,68],[66,60,86],[89,111,175],[107,185,182],[251,250,249],[184,170,176],[121,112,126],[148,91,40]],[[140,143,174],[88,69,99],[62,33,55],[154,99,72],[215,155,125],[245,237,186],[192,199,65],[100,125,52],[228,148,58],[157,48,59],[210,100,113],[112,55,127],[126,196,193],[52,133,157],[23,67,75],[31,14,28]],[[94,96,110],[34,52,209],[12,126,69],[68,170,204],[138,54,34],[235,138,96],[0,0,0],[92,46,120],[226,61,105],[170,92,61],[255,217,63],[181,181,181],[255,255,255]],[[21,25,26],[138,76,88],[217,98,117],[230,184,193],[69,107,115],[75,151,166],[165,189,194],[255,245,247]]],currentPalette=3,maxPalette=paletteList.length;document.addEventListener("DOMContentLoaded",(function(){document.getElementById("pixlInput").onchange=function(t){var c=new Image;c.src=URL.createObjectURL(this.files[0]),c.onload=function(){px.setFromImgSource(c.src),e()}};var e=function(){document.querySelector(".loader").classList.toggle("active"),setTimeout((function(){document.querySelector(".loader").classList.toggle("active")}),1500),px.setScale(c.value).setPalette(paletteList[currentPalette]).draw().pixelate(),n.checked&&px.convertGrayscale(),a.checked&&px.convertPalette(),r.value&&px.setMaxHeight(r.value).resizeImage(),o.value&&px.setMaxWidth(o.value).resizeImage()},t=function(){document.querySelector("#palettecolor").innerHTML="",paletteList[currentPalette].forEach((function(e){var t=document.createElement("div");t.classList="colorblock",t.style.backgroundColor="rgba(".concat(e[0],",").concat(e[1],",").concat(e[2],",1)"),document.querySelector("#palettecolor").appendChild(t)}))};t();var c=document.querySelector("#blocksize");c.addEventListener("change",(function(t){document.querySelector("#blockvalue").innerText=this.value,e()}));var n=document.querySelector("#greyscale");n.addEventListener("change",e);var a=document.querySelector("#palette");a.addEventListener("change",e);var r=document.querySelector("#maxheight");r.addEventListener("change",e);var o=document.querySelector("#maxwidth");o.addEventListener("change",e),document.querySelector("#changepalette").addEventListener("click",(function(c){currentPalette>0?currentPalette--:currentPalette=maxPalette-1,t(),a.checked=!0,e()})),document.querySelector("#downloadimage").addEventListener("click",(function(e){px.saveImage()})),e()}));
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 18464f7..9b0347d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -143,10 +143,19 @@ <h3>API</h3>
   </div></section>
   <img src="assets/sky.jpg"  id="pixelitimg" alt="">
   <!--<img style="visibility: hidden;" id="pixlimg" alt="">  -->
-    <script>"use strict";function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}function _createClass(t,e,i){return e&&_defineProperties(t.prototype,e),i&&_defineProperties(t,i),t}var pixelit=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};_classCallCheck(this,t),this.drawto=e.to||document.getElementById("pixelitcanvas"),this.drawfrom=e.from||document.getElementById("pixelitimg"),this.hideFromImg(),this.scale=e.scale&&e.scale>0&&e.scale<=50?.01*e.scale:.08,this.palette=e.palette||[[140,143,174],[88,69,99],[62,33,55],[154,99,72],[215,155,125],[245,237,186],[192,199,65],[100,125,52],[228,148,58],[157,48,59],[210,100,113],[112,55,127],[126,196,193],[52,133,157],[23,67,75],[31,14,28]],this.maxHeight=e.maxHeight,this.maxWidth=e.maxWidth,this.ctx=this.drawto.getContext("2d")}return _createClass(t,[{key:"hideFromImg",value:function(){return this.drawfrom.style.visibility="hidden",this.drawfrom.style.position="fixed",this.drawfrom.style.top=0,this.drawfrom.style.left=0,this}},{key:"setFromImgSource",value:function(t){return this.drawfrom.src=t,this}},{key:"setDrawFrom",value:function(t){return this.drawfrom=t,this}},{key:"setDrawTo",value:function(t){return this.drawto=t,this}},{key:"setPalette",value:function(t){return this.palette=t,this}},{key:"setMaxWidth",value:function(t){return this.maxWidth=t,this}},{key:"setMaxHeight",value:function(t){return this.maxHeight=t,this}},{key:"setScale",value:function(t){return this.scale=t>0&&t<=50?.01*t:.08,this}},{key:"getPalette",value:function(){return this.palette}},{key:"colorSim",value:function(t,e){var i,a,h=0;for(i=0,a=t.length;i<a;i++)h+=(t[i]-e[i])*(t[i]-e[i]);return Math.sqrt(h)}},{key:"similarColor",value:function(t){var e=this,i=[],a=this.colorSim(t,this.palette[0]);return this.palette.forEach((function(h){e.colorSim(t,h)<=a&&(i=h,a=e.colorSim(t,h))})),i}},{key:"pixelate",value:function(){this.drawto.width=this.drawfrom.width,this.drawto.height=this.drawfrom.height;var t=this.drawto.width*this.scale,e=this.drawto.height*this.scale;this.ctx.mozImageSmoothingEnabled=!1,this.ctx.webkitImageSmoothingEnabled=!1,this.ctx.imageSmoothingEnabled=!1;var i=document.createElement("canvas");return i.getContext("2d").drawImage(this.drawfrom,0,0,t,e),this.ctx.drawImage(i,0,0,t,e,0,0,this.drawfrom.width,this.drawfrom.height),i.remove(),this}},{key:"convertGrayscale",value:function(){for(var t=this.drawto.width,e=this.drawto.height,i=this.ctx.getImageData(0,0,t,e),a=0;a<i.height;a++)for(var h=0;h<i.width;h++){var r=4*a*i.width+4*h,s=(i.data[r]+i.data[r+1]+i.data[r+2])/3;i.data[r]=s,i.data[r+1]=s,i.data[r+2]=s}return this.ctx.putImageData(i,0,0,0,0,i.width,i.height),this}},{key:"convertPalette",value:function(){for(var t=this.drawto.width,e=this.drawto.height,i=this.ctx.getImageData(0,0,t,e),a=0;a<i.height;a++)for(var h=0;h<i.width;h++){var r=4*a*i.width+4*h,s=this.similarColor([i.data[r],i.data[r+1],i.data[r+2]]);i.data[r]=s[0],i.data[r+1]=s[1],i.data[r+2]=s[2]}return this.ctx.putImageData(i,0,0,0,0,i.width,i.height),this}},{key:"resizeImage",value:function(){var t=document.createElement("canvas"),e=t.getContext("2d"),i=1;return this.maxWidth||this.maxHeight?(this.maxWidth&&this.drawto.width>this.maxWidth&&(i=this.maxWidth/this.drawto.width),this.maxHeight&&this.drawto.height>this.maxHeight&&(i=this.maxHeight/this.drawto.height),t.width=this.drawto.width,t.height=this.drawto.height,e.drawImage(this.drawto,0,0),this.drawto.width=this.drawto.width*i,this.drawto.height=this.drawto.height*i,this.ctx.drawImage(t,0,0,t.width,t.height,0,0,this.drawto.width,this.drawto.height),this):0}},{key:"draw",value:function(){return this.drawto.width=this.drawfrom.width,this.drawto.height=this.drawfrom.height,this.ctx.drawImage(this.drawfrom,0,0),this.resizeImage(),this}},{key:"saveImage",value:function(){var t=document.createElement("a");t.download="pxArt.png",t.href=this.drawto.toDataURL("image/png").replace("image/png","image/octet-stream"),document.querySelector("body").appendChild(t),t.click(),document.querySelector("body").removeChild(t)}}]),t}();</script>
-    <script>
-      "use strict";var px=new pixelit({from:document.getElementById("pixelitimg")}),paletteList=[[[13,43,69],[32,60,86],[84,78,104],[141,105,122],[208,129,89],[255,170,94],[255,212,163],[255,236,214]],[[48,0,48],[96,40,120],[248,144,32],[248,240,136]],[[26,28,44],[93,39,93],[177,62,83],[239,125,87],[255,205,117],[167,240,112],[56,183,100],[37,113,121],[41,54,111],[59,93,201],[65,166,246],[115,239,247],[244,244,244],[148,176,194],[86,108,134],[51,60,87]],[[44,33,55],[118,68,98],[237,180,161],[169,104,104]],[[7,5,5],[33,25,25],[82,58,42],[138,107,62],[193,156,77],[234,219,116],[160,179,53],[83,124,68],[66,60,86],[89,111,175],[107,185,182],[251,250,249],[184,170,176],[121,112,126],[148,91,40]],[[140,143,174],[88,69,99],[62,33,55],[154,99,72],[215,155,125],[245,237,186],[192,199,65],[100,125,52],[228,148,58],[157,48,59],[210,100,113],[112,55,127],[126,196,193],[52,133,157],[23,67,75],[31,14,28]],[[94,96,110],[34,52,209],[12,126,69],[68,170,204],[138,54,34],[235,138,96],[0,0,0],[92,46,120],[226,61,105],[170,92,61],[255,217,63],[181,181,181],[255,255,255]],[[21,25,26],[138,76,88],[217,98,117],[230,184,193],[69,107,115],[75,151,166],[165,189,194],[255,245,247]]],currentPalette=3,maxPalette=paletteList.length;document.addEventListener("DOMContentLoaded",(function(){document.getElementById("pixlInput").onchange=function(t){var c=new Image;c.src=URL.createObjectURL(this.files[0]),c.onload=function(){px.setFromImgSource(c.src),e()}};var e=function(){document.querySelector(".loader").classList.toggle("active"),setTimeout((function(){document.querySelector(".loader").classList.toggle("active")}),500),px.setScale(c.value).setPalette(paletteList[currentPalette]).draw().pixelate(),n.checked&&px.convertGrayscale(),a.checked&&px.convertPalette(),r.value&&px.setMaxHeight(r.value).resizeImage(),o.value&&px.setMaxWidth(o.value).resizeImage()},t=function(){document.querySelector("#palettecolor").innerHTML="",paletteList[currentPalette].forEach((function(e){var t=document.createElement("div");t.classList="colorblock",t.style.backgroundColor="rgba(".concat(e[0],",").concat(e[1],",").concat(e[2],",1)"),document.querySelector("#palettecolor").appendChild(t)}))};t();var c=document.querySelector("#blocksize");c.addEventListener("change",(function(t){document.querySelector("#blockvalue").innerText=this.value,e()}));var n=document.querySelector("#greyscale");n.addEventListener("change",e);var a=document.querySelector("#palette");a.addEventListener("change",e);var r=document.querySelector("#maxheight");r.addEventListener("change",e);var o=document.querySelector("#maxwidth");o.addEventListener("change",e),document.querySelector("#changepalette").addEventListener("click",(function(c){currentPalette>0?currentPalette--:currentPalette=maxPalette-1,t(),a.checked=!0,e()})),document.querySelector("#downloadimage").addEventListener("click",(function(e){px.saveImage()})),e()}));
+  <script>
+    "use strict";function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}function _createClass(t,e,i){return e&&_defineProperties(t.prototype,e),i&&_defineProperties(t,i),t}var pixelit=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};_classCallCheck(this,t),this.drawto=e.to||document.getElementById("pixelitcanvas"),this.drawfrom=e.from||document.getElementById("pixelitimg"),this.hideFromImg(),this.scale=e.scale&&e.scale>0&&e.scale<=50?.01*e.scale:.08,this.palette=e.palette||[[140,143,174],[88,69,99],[62,33,55],[154,99,72],[215,155,125],[245,237,186],[192,199,65],[100,125,52],[228,148,58],[157,48,59],[210,100,113],[112,55,127],[126,196,193],[52,133,157],[23,67,75],[31,14,28]],this.maxHeight=e.maxHeight,this.maxWidth=e.maxWidth,this.ctx=this.drawto.getContext("2d")}return _createClass(t,[{key:"hideFromImg",value:function(){return this.drawfrom.style.visibility="hidden",this.drawfrom.style.position="fixed",this.drawfrom.style.top=0,this.drawfrom.style.left=0,this}},{key:"setFromImgSource",value:function(t){return this.drawfrom.src=t,this}},{key:"setDrawFrom",value:function(t){return this.drawfrom=t,this}},{key:"setDrawTo",value:function(t){return this.drawto=t,this}},{key:"setPalette",value:function(t){return this.palette=t,this}},{key:"setMaxWidth",value:function(t){return this.maxWidth=t,this}},{key:"setMaxHeight",value:function(t){return this.maxHeight=t,this}},{key:"setScale",value:function(t){return this.scale=t>0&&t<=50?.01*t:.08,this}},{key:"getPalette",value:function(){return this.palette}},{key:"colorSim",value:function(t,e){var i,a,h=0;for(i=0,a=t.length;i<a;i++)h+=(t[i]-e[i])*(t[i]-e[i]);return Math.sqrt(h)}},{key:"similarColor",value:function(t){var e=this,i=[],a=this.colorSim(t,this.palette[0]);return this.palette.forEach((function(h){e.colorSim(t,h)<=a&&(i=h,a=e.colorSim(t,h))})),i}},{key:"pixelate",value:function(){this.drawto.width=this.drawfrom.naturalWidth,this.drawto.height=this.drawfrom.naturalHeight;var t=this.drawto.width*this.scale,e=this.drawto.height*this.scale,i=document.createElement("canvas");return(this.drawto.width>800||this.drawto.width>800)&&(this.scale*=.25,t=this.drawto.width*this.scale,e=this.drawto.height*this.scale,i.width=Math.max(t,e)+50,i.height=Math.max(t,e)+50),i.getContext("2d").drawImage(this.drawfrom,0,0,t,e),document.body.appendChild(i),this.ctx.mozImageSmoothingEnabled=!1,this.ctx.webkitImageSmoothingEnabled=!1,this.ctx.imageSmoothingEnabled=!1,this.ctx.drawImage(i,0,0,t,e,0,0,this.drawfrom.naturalWidth,this.drawfrom.naturalHeight),i.remove(),this}},{key:"convertGrayscale",value:function(){for(var t=this.drawto.width,e=this.drawto.height,i=this.ctx.getImageData(0,0,t,e),a=0;a<i.height;a++)for(var h=0;h<i.width;h++){var r=4*a*i.width+4*h,s=(i.data[r]+i.data[r+1]+i.data[r+2])/3;i.data[r]=s,i.data[r+1]=s,i.data[r+2]=s}return this.ctx.putImageData(i,0,0,0,0,i.width,i.height),this}},{key:"convertPalette",value:function(){for(var t=this.drawto.width,e=this.drawto.height,i=this.ctx.getImageData(0,0,t,e),a=0;a<i.height;a++)for(var h=0;h<i.width;h++){var r=4*a*i.width+4*h,s=this.similarColor([i.data[r],i.data[r+1],i.data[r+2]]);i.data[r]=s[0],i.data[r+1]=s[1],i.data[r+2]=s[2]}return this.ctx.putImageData(i,0,0,0,0,i.width,i.height),this}},{key:"resizeImage",value:function(){var t=document.createElement("canvas"),e=t.getContext("2d"),i=1;return this.maxWidth||this.maxHeight?(this.maxWidth&&this.drawto.width>this.maxWidth&&(i=this.maxWidth/this.drawto.width),this.maxHeight&&this.drawto.height>this.maxHeight&&(i=this.maxHeight/this.drawto.height),t.width=this.drawto.width,t.height=this.drawto.height,e.drawImage(this.drawto,0,0),this.drawto.width=this.drawto.width*i,this.drawto.height=this.drawto.height*i,this.ctx.drawImage(t,0,0,t.width,t.height,0,0,this.drawto.width,this.drawto.height),this):0}},{key:"draw",value:function(){return this.drawto.width=this.drawfrom.width,this.drawto.height=this.drawfrom.height,this.ctx.drawImage(this.drawfrom,0,0),this.resizeImage(),this}},{key:"saveImage",value:function(){var t=document.createElement("a");t.download="pxArt.png",t.href=this.drawto.toDataURL("image/png").replace("image/png","image/octet-stream"),document.querySelector("body").appendChild(t),t.click(),document.querySelector("body").removeChild(t)}}]),t}();
+  </script>
+
+  <script>
+        "use strict";var px=new pixelit({from:document.getElementById("pixelitimg")}),paletteList=[[[13,43,69],[32,60,86],[84,78,104],[141,105,122],[208,129,89],[255,170,94],[255,212,163],[255,236,214]],[[48,0,48],[96,40,120],[248,144,32],[248,240,136]],[[26,28,44],[93,39,93],[177,62,83],[239,125,87],[255,205,117],[167,240,112],[56,183,100],[37,113,121],[41,54,111],[59,93,201],[65,166,246],[115,239,247],[244,244,244],[148,176,194],[86,108,134],[51,60,87]],[[44,33,55],[118,68,98],[237,180,161],[169,104,104]],[[7,5,5],[33,25,25],[82,58,42],[138,107,62],[193,156,77],[234,219,116],[160,179,53],[83,124,68],[66,60,86],[89,111,175],[107,185,182],[251,250,249],[184,170,176],[121,112,126],[148,91,40]],[[140,143,174],[88,69,99],[62,33,55],[154,99,72],[215,155,125],[245,237,186],[192,199,65],[100,125,52],[228,148,58],[157,48,59],[210,100,113],[112,55,127],[126,196,193],[52,133,157],[23,67,75],[31,14,28]],[[94,96,110],[34,52,209],[12,126,69],[68,170,204],[138,54,34],[235,138,96],[0,0,0],[92,46,120],[226,61,105],[170,92,61],[255,217,63],[181,181,181],[255,255,255]],[[21,25,26],[138,76,88],[217,98,117],[230,184,193],[69,107,115],[75,151,166],[165,189,194],[255,245,247]]],currentPalette=3,maxPalette=paletteList.length;document.addEventListener("DOMContentLoaded",(function(){document.getElementById("pixlInput").onchange=function(t){var c=new Image;c.src=URL.createObjectURL(this.files[0]),c.onload=function(){px.setFromImgSource(c.src),e()}};var e=function(){document.querySelector(".loader").classList.toggle("active"),setTimeout((function(){document.querySelector(".loader").classList.toggle("active")}),1500),px.setScale(c.value).setPalette(paletteList[currentPalette]).draw().pixelate(),n.checked&&px.convertGrayscale(),a.checked&&px.convertPalette(),r.value&&px.setMaxHeight(r.value).resizeImage(),o.value&&px.setMaxWidth(o.value).resizeImage()},t=function(){document.querySelector("#palettecolor").innerHTML="",paletteList[currentPalette].forEach((function(e){var t=document.createElement("div");t.classList="colorblock",t.style.backgroundColor="rgba(".concat(e[0],",").concat(e[1],",").concat(e[2],",1)"),document.querySelector("#palettecolor").appendChild(t)}))};t();var c=document.querySelector("#blocksize");c.addEventListener("change",(function(t){document.querySelector("#blockvalue").innerText=this.value,e()}));var n=document.querySelector("#greyscale");n.addEventListener("change",e);var a=document.querySelector("#palette");a.addEventListener("change",e);var r=document.querySelector("#maxheight");r.addEventListener("change",e);var o=document.querySelector("#maxwidth");o.addEventListener("change",e),document.querySelector("#changepalette").addEventListener("click",(function(c){currentPalette>0?currentPalette--:currentPalette=maxPalette-1,t(),a.checked=!0,e()})),document.querySelector("#downloadimage").addEventListener("click",(function(e){px.saveImage()})),e()}));
+
     </script>
+
+    <!--
+      <script src="https://localhost/pixelit/dist/pixelit.js"></script>
+      <script src="https://localhost/pixelit/docs/assets/main.js"></script>
+    -->
   <!-- loader-->
   <div class="loader">
     <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>