diff --git a/dist/pixelit.js b/dist/pixelit.js index 43ef674..7de96ac 100644 --- a/dist/pixelit.js +++ b/dist/pixelit.js @@ -3,10 +3,8 @@ * @author José Moreira @ **/ - class pixelit { - - constructor(config={}) { + constructor(config = {}) { //target for canvas this.drawto = config.to || document.getElementById("pixelitcanvas"); //origin of uploaded image/src img @@ -14,32 +12,33 @@ class pixelit { //hide image element this.hideFromImg(); //range between 0 to 100 - this.scale = config.scale && config.scale > 0 && config.scale <= 50 ? config.scale * 0.01 : 8 * 0.01; + this.scale = + config.scale && config.scale > 0 && config.scale <= 50 + ? config.scale * 0.01 + : 8 * 0.01; this.palette = config.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] + [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 = config.maxHeight; this.maxWidth = config.maxWidth; this.ctx = this.drawto.getContext("2d"); } - - /** hide from image */ hideFromImg() { this.drawfrom.style.visibility = "hidden"; @@ -115,9 +114,9 @@ class pixelit { * returns {arr} of current palette */ - getPalette(){ - return this.palette; - } + getPalette() { + return this.palette; + } /** * color similarity between colors, lower is better @@ -146,7 +145,7 @@ class pixelit { similarColor(actualColor) { let selectedColor = []; let currentSim = this.colorSim(actualColor, this.palette[0]); - this.palette.forEach(color => { + this.palette.forEach((color) => { if (this.colorSim(actualColor, color) <= currentSim) { selectedColor = color; currentSim = this.colorSim(actualColor, color); @@ -162,22 +161,40 @@ class pixelit { 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.ctx.drawImage(this.drawfrom, 0, 0, scaledW, scaledH); - this.ctx.drawImage(this.drawto, 0, 0, scaledW, scaledH, 0, 0, this.drawfrom.width, this.drawfrom.height); + //previous method, would failt for background transparent images + //this.ctx.drawImage(this.drawfrom, 0, 0, scaledW, scaledH); + + //make temporary canvas to make new scaled copy + const tempCanvas = document.createElement("canvas"); + // get the context + const tempContext = tempCanvas.getContext("2d"); + // draw the image into the canvas + tempContext.drawImage(this.drawfrom, 0, 0, scaledW, scaledH); + //draw to final canvas + this.ctx.drawImage( + tempCanvas, + 0, + 0, + scaledW, + scaledH, + 0, + 0, + this.drawfrom.width, + this.drawfrom.height + ); + //remove temp element + tempCanvas.remove(); - //hack images with transparencies on top left corner - //this.ctx.clearRect(0, 0, scaledW*1.05, scaledH*1.05); return this; } @@ -212,7 +229,11 @@ class pixelit { for (var x = 0; x < imgPixels.width; x++) { var i = y * 4 * imgPixels.width + x * 4; //var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; - const finalcolor = this.similarColor([imgPixels.data[i], imgPixels.data[i + 1], imgPixels.data[i + 2]]); + const finalcolor = this.similarColor([ + imgPixels.data[i], + imgPixels.data[i + 1], + imgPixels.data[i + 2], + ]); imgPixels.data[i] = finalcolor[0]; imgPixels.data[i + 1] = finalcolor[1]; imgPixels.data[i + 2] = finalcolor[2]; @@ -251,7 +272,17 @@ class pixelit { this.drawto.width = this.drawto.width * ratio; this.drawto.height = this.drawto.height * ratio; - this.ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, this.drawto.width, this.drawto.height); + this.ctx.drawImage( + canvasCopy, + 0, + 0, + canvasCopy.width, + canvasCopy.height, + 0, + 0, + this.drawto.width, + this.drawto.height + ); return this; } @@ -264,6 +295,7 @@ class pixelit { //draw image to canvas this.drawto.width = this.drawfrom.width; this.drawto.height = this.drawfrom.height; + //draw this.ctx.drawImage(this.drawfrom, 0, 0); //resize is always done this.resizeImage(); @@ -277,7 +309,9 @@ class pixelit { saveImage() { const link = document.createElement("a"); link.download = "pxArt.png"; - link.href = this.drawto.toDataURL("image/png").replace("image/png", "image/octet-stream"); + link.href = this.drawto + .toDataURL("image/png") + .replace("image/png", "image/octet-stream"); document.querySelector("body").appendChild(link); link.click(); document.querySelector("body").removeChild(link); diff --git a/dist/pixelitmin.js b/dist/pixelitmin.js index 259df22..e442b71 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 @ **/ -"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;i0&&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;ithis.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}(); +"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;i0&&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;ithis.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 900e9e4..0832ccd 100644 --- a/docs/assets/main.js +++ b/docs/assets/main.js @@ -1,28 +1,27 @@ //create object -const px = new pixelit({from: document.getElementById('pixelitimg')}); - +const px = new pixelit({ from: document.getElementById("pixelitimg") }); //stuff for webpage functionality const 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], + [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], ], -[ - [48,0,48], - [96,40,120], - [248,144,32], - [248,240,136] -], [ - [26,28,44], - [93,39,93], + [26, 28, 44], + [93, 39, 93], [177, 62, 83], [239, 125, 87], [255, 205, 117], @@ -36,170 +35,166 @@ const paletteList = [ [244, 244, 244], [148, 176, 194], [86, 108, 134], - [51, 60, 87] + [51, 60, 87], ], [ - [44,33,55], - [118,68,98], - [237,180,161], - [169,104,104], + [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] + [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] + [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] + [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] + [21, 25, 26], + [138, 76, 88], + [217, 98, 117], + [230, 184, 193], + [69, 107, 115], + [75, 151, 166], + [165, 189, 194], + [255, 245, 247], ], - -] +]; let currentPalette = 3; let maxPalette = paletteList.length; document.addEventListener("DOMContentLoaded", function () { - - //load image to canvas -document.getElementById("pixlInput").onchange = function(e) { - var img = new Image(); - img.src = URL.createObjectURL(this.files[0]); - img.onload = () => { - //create element - //document.getElementById('teste').src = img.src; - px.setFromImgSource(img.src); - pixelit(); + //load image to canvas + document.getElementById("pixlInput").onchange = function (e) { + var img = new Image(); + img.src = URL.createObjectURL(this.files[0]); + img.onload = () => { + //create element + //document.getElementById('teste').src = img.src; + px.setFromImgSource(img.src); + pixelit(); //.pixelate() //.convertGrayscale() //.convertPalette(); //.saveImage(); - //console.log(px.getPalette()); + //console.log(px.getPalette()); + }; }; -}; //function to apply effects - const pixelit = ()=>{ - document.querySelector('.loader').classList.toggle('active'); + const pixelit = () => { + document.querySelector(".loader").classList.toggle("active"); setTimeout(() => { - document.querySelector('.loader').classList.toggle('active'); + document.querySelector(".loader").classList.toggle("active"); }, 500); - px.setScale(blocksize.value).setPalette(paletteList[currentPalette]).draw().pixelate(); + 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; + 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 + const makePaletteGradient = () => { + //create palette let pdivs = ""; //create palette of colors - document.querySelector('#palettecolor').innerHTML = ''; - paletteList[currentPalette].forEach(elem=>{ - let div = document.createElement('div'); - div.classList = 'colorblock'; + document.querySelector("#palettecolor").innerHTML = ""; + paletteList[currentPalette].forEach((elem) => { + let div = document.createElement("div"); + div.classList = "colorblock"; div.style.backgroundColor = `rgba(${elem[0]},${elem[1]},${elem[2]},1)`; //div.innerHTML = `
`; - document.querySelector('#palettecolor').appendChild(div); + document.querySelector("#palettecolor").appendChild(div); //pdivs += `
`; }); //document.querySelector('#palettecolor').innerHTML = pdivs; - } + }; -makePaletteGradient(); + makePaletteGradient(); //block size - const blocksize = document.querySelector('#blocksize'); - blocksize.addEventListener('change',function(e){ - document.querySelector('#blockvalue').innerText = this.value; + const blocksize = document.querySelector("#blocksize"); + blocksize.addEventListener("change", function (e) { + document.querySelector("#blockvalue").innerText = this.value; pixelit(); - }); - //greyscale -const greyscale = document.querySelector('#greyscale'); -greyscale.addEventListener('change',pixelit); -//palette -const palette = document.querySelector('#palette'); -palette.addEventListener('change',pixelit); - //maxheight -const maxheight = document.querySelector('#maxheight'); -maxheight.addEventListener('change',pixelit); - //maxwidth -const maxwidth = document.querySelector('#maxwidth'); -maxwidth.addEventListener('change',pixelit); -//change palette -const changePalette = document.querySelector('#changepalette'); -changePalette.addEventListener('click',function(e){ - currentPalette > 0 ? currentPalette-- : currentPalette = maxPalette-1; - makePaletteGradient(); - palette.checked = true; - pixelit(); -}); - - //downloadimage options -const downloadimage = document.querySelector('#downloadimage'); + }); + //greyscale + const greyscale = document.querySelector("#greyscale"); + greyscale.addEventListener("change", pixelit); + //palette + const palette = document.querySelector("#palette"); + palette.addEventListener("change", pixelit); + //maxheight + const maxheight = document.querySelector("#maxheight"); + maxheight.addEventListener("change", pixelit); + //maxwidth + const maxwidth = document.querySelector("#maxwidth"); + maxwidth.addEventListener("change", pixelit); + //change palette + const changePalette = document.querySelector("#changepalette"); + changePalette.addEventListener("click", function (e) { + currentPalette > 0 ? currentPalette-- : (currentPalette = maxPalette - 1); + makePaletteGradient(); + palette.checked = true; + pixelit(); + }); -downloadimage.addEventListener('click', function(e){ - //download image - px.saveImage(); -}); + //downloadimage options + const downloadimage = document.querySelector("#downloadimage"); -pixelit(); + downloadimage.addEventListener("click", function (e) { + //download image + px.saveImage(); + }); -}); \ No newline at end of file + //run on page boot to pixelit default image + pixelit(); +}); diff --git a/docs/assets/mainmin.js b/docs/assets/mainmin.js index 73e1109..37a7ca1 100644 --- a/docs/assets/mainmin.js +++ b/docs/assets/mainmin.js @@ -1,116 +1 @@ -"use strict"; - -//create object -var px = new pixelit({ - from: document.getElementById('pixelitimg') -}); //stuff for webpage functionality - -var 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] -], - [ - [38,48,95], - [14,46,71], - [37,32,48], - [99,93,92], - [72,130,134], - [121, 142, 163], - [90, 93, 107] - ], -[[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]]]; -var currentPalette = 3; -var maxPalette = paletteList.length; -document.addEventListener("DOMContentLoaded", function () { - //load image to canvas - document.getElementById("pixlInput").onchange = function (e) { - var img = new Image(); - img.src = URL.createObjectURL(this.files[0]); - - img.onload = function () { - //create element - //document.getElementById('teste').src = img.src; - px.setFromImgSource(img.src); - pixelit(); //.pixelate() - //.convertGrayscale() - //.convertPalette(); - //.saveImage(); - //console.log(px.getPalette()); - }; - }; //function to apply effects - - - var pixelit = function pixelit() { - document.querySelector('.loader').classList.toggle('active'); - setTimeout(function () { - document.querySelector('.loader').classList.toggle('active'); - }, 500); - 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; - - }; - - var makePaletteGradient = function makePaletteGradient() { - //create palette - var pdivs = ""; //create palette of colors - - document.querySelector('#palettecolor').innerHTML = ''; - paletteList[currentPalette].forEach(function (elem) { - var div = document.createElement('div'); - div.classList = 'colorblock'; - div.style.backgroundColor = "rgba(".concat(elem[0], ",").concat(elem[1], ",").concat(elem[2], ",1)"); //div.innerHTML = `
`; - - document.querySelector('#palettecolor').appendChild(div); //pdivs += `
`; - }); //document.querySelector('#palettecolor').innerHTML = pdivs; - }; - - makePaletteGradient(); //block size - - var blocksize = document.querySelector('#blocksize'); - blocksize.addEventListener('change', function (e) { - document.querySelector('#blockvalue').innerText = this.value; - pixelit(); - }); //greyscale - - var greyscale = document.querySelector('#greyscale'); - greyscale.addEventListener('change', pixelit); //palette - - var palette = document.querySelector('#palette'); - palette.addEventListener('change', pixelit); //maxheight - - var maxheight = document.querySelector('#maxheight'); - maxheight.addEventListener('change', pixelit); //maxwidth - - var maxwidth = document.querySelector('#maxwidth'); - maxwidth.addEventListener('change', pixelit); //change palette - - var changePalette = document.querySelector('#changepalette'); - changePalette.addEventListener('click', function (e) { - currentPalette > 0 ? currentPalette-- : currentPalette = maxPalette - 1; - makePaletteGradient(); - palette.checked = true; - pixelit(); - }); //downloadimage options - - var downloadimage = document.querySelector('#downloadimage'); - downloadimage.addEventListener('click', function (e) { - //download image - px.saveImage(); - }); - pixelit(); -}); +"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 diff --git a/docs/assets/pixelitmin.js b/docs/assets/pixelitmin.js deleted file mode 100644 index ccc864d..0000000 --- a/docs/assets/pixelitmin.js +++ /dev/null @@ -1,5 +0,0 @@ -/** - * pixelit - convert an image to Pixel Art, with/out grayscale and based on a color palette. - * @author José Moreira @ - **/ -"use strict";function _instanceof(t,e){return null!=e&&"undefined"!=typeof Symbol&&e[Symbol.hasInstance]?e[Symbol.hasInstance](t):t instanceof e}function _classCallCheck(t,e){if(!_instanceof(t,e))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,e){for(var i=0;i0&&void 0!==arguments[0]?arguments[0]:{};_classCallCheck(this,t),this.drawto=e.to||document.getElementById("pixelitcanvas"),this.drawfrom=e.from||document.getElementById("pixelitcanvas"),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;ithis.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/index.html b/docs/index.html index 6067f84..d234fbc 100644 --- a/docs/index.html +++ b/docs/index.html @@ -133,10 +133,8 @@

API

.pixelate() draws a pixelated version of the from image to the to canvas, , apply only after .draw is called

.saveImage() saves/downloads current image

-

Known Problems/bugs

-

Images with transparencies on the top left corner will make an image appear there, that can be fixed uncommenting the hack from the .pixelate function

-

Works fine with the other modes

- + +
@@ -144,11 +142,9 @@

Known Problems/bugs

- - - - - + + +