Skip to content

Commit

Permalink
js style
Browse files Browse the repository at this point in the history
  • Loading branch information
@giventofly
giventofly committed Jul 3, 2019
1 parent af19717 commit fdbd029
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 2 deletions.
6 changes: 5 additions & 1 deletion docs/assets/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,8 +127,12 @@ const makePaletteGradient = ()=>{
//create palette
let pdivs = "";
//create palette of colors
document.querySelector('#palettecolor').innerHTML = '';
paletteList[currentPalette].forEach(elem=>{
pdivs += `<div class="colorblock" style="background-color: rgba(${elem[0]},${elem[1]},${elem[2]},1)"></div>`;
let div = document.createElement('div');
div.innerHTML = `<div class="colorblock" style="background-color: rgba(${elem[0]},${elem[1]},${elem[2]},1)"></div>`;
document.querySelector('#palettecolor').appendChild(div);
//pdivs += `<div class="colorblock" style="background-color: rgba(${elem[0]},${elem[1]},${elem[2]},1)"></div>`;
});
document.querySelector('#palettecolor').innerHTML = pdivs;
}
Expand Down
86 changes: 85 additions & 1 deletion docs/assets/mainmin.js
View file
Original file line number Diff line number Diff line change
@@ -1 +1,85 @@
"use strict";var px=new pixelit({from:document.getElementById("pixelitimg")}),paletteList=[[[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 n=new Image;n.src=URL.createObjectURL(this.files[0]),n.onload=function(){px.setFromImgSource(n.src),e()}};var e=function(){px.setScale(n.value).setPalette(paletteList[currentPalette]).draw().pixelate(),a.checked&&px.convertGrayscale(),c.checked&&px.convertPalette(),r.value&&px.setMaxHeight(r.value).resizeImage(),l.value&&px.setMaxWidth(l.value).resizeImage()},t=function(){var e="";paletteList[currentPalette].forEach(function(t){e+='<div class="colorblock" style="background-color: rgba('.concat(t[0],",").concat(t[1],",").concat(t[2],',1)"></div>')}),document.querySelector("#palettecolor").innerHTML=e};t();var n=document.querySelector("#blocksize");n.addEventListener("change",function(t){document.querySelector("#blockvalue").innerText=this.value,e()});var a=document.querySelector("#greyscale");a.addEventListener("change",e);var c=document.querySelector("#palette");c.addEventListener("change",e);var r=document.querySelector("#maxheight");r.addEventListener("change",e);var l=document.querySelector("#maxwidth");l.addEventListener("change",e),document.querySelector("#changepalette").addEventListener("click",function(n){currentPalette>0?currentPalette--:currentPalette=maxPalette-1,t(),c.checked=!0,e()}),document.querySelector("#downloadimage").addEventListener("click",function(e){px.saveImage()}),e()});
"use strict";

//create object
var px = new pixelit({
from: document.getElementById('pixelitimg')
}); //stuff for webpage functionality

var paletteList = [[[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() {
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.innerHTML = "<div class=\"colorblock\" style=\"background-color: rgba(".concat(elem[0], ",").concat(elem[1], ",").concat(elem[2], ",1)\"></div>");
document.querySelector('#palettecolor').appendChild(div); //pdivs += `<div class="colorblock" style="background-color: rgba(${elem[0]},${elem[1]},${elem[2]},1)"></div>`;
});
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();
});

0 comments on commit fdbd029

Please sign in to comment.