62 lines
2.7 KiB
JavaScript
62 lines
2.7 KiB
JavaScript
document.getElementById('open-image-browse-holder').addEventListener('change', function () {
|
|
if (this.files && this.files[0]) {
|
|
|
|
//make sure file is allowed filetype
|
|
var fileContentType = this.files[0].type;
|
|
if (fileContentType == 'image/png' || fileContentType == 'image/gif') {
|
|
|
|
//load file
|
|
var fileReader = new FileReader();
|
|
fileReader.onload = function(e) {
|
|
var img = new Image();
|
|
img.onload = function() {
|
|
|
|
//create a new pixel with the images dimentions
|
|
newPixel(this.width, this.height, []);
|
|
|
|
//draw the image onto the canvas
|
|
currentLayer.context.drawImage(img, 0, 0);
|
|
|
|
var colorPalette = {};
|
|
var imagePixelData = currentLayer.context.getImageData(0,0,this.width, this.height).data;
|
|
|
|
var imagePixelDataLength = imagePixelData.length;
|
|
|
|
console.log(imagePixelData);
|
|
for (var i = 0; i < imagePixelDataLength; i += 4) {
|
|
var color = imagePixelData[i]+','+imagePixelData[i + 1]+','+imagePixelData[i + 2];
|
|
if (!colorPalette[color]) {
|
|
colorPalette[color] = {r:imagePixelData[i],g:imagePixelData[i + 1],b:imagePixelData[i + 2]};
|
|
|
|
//don't allow more than 256 colors to be added
|
|
if (Object.keys(colorPalette).length >= settings.maxColorsOnImportedImage) {
|
|
alert('The image loaded seems to have more than '+settings.maxColorsOnImportedImage+' colors.');
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
//create array out of colors object
|
|
var colorPaletteArray = [];
|
|
for (var color in colorPalette) {
|
|
if( colorPalette.hasOwnProperty(color) ) {
|
|
colorPaletteArray.push('#'+rgbToHex(colorPalette[color]));
|
|
}
|
|
}
|
|
console.log('COLOR PALETTE ARRAY', colorPaletteArray);
|
|
|
|
//create palette form colors array
|
|
createColorPalette(colorPaletteArray, false);
|
|
|
|
//track google event
|
|
ga('send', 'event', 'Pixel Editor Load', colorPalette.length, this.width+'/'+this.height); /*global ga*/
|
|
|
|
};
|
|
img.src = e.target.result;
|
|
};
|
|
fileReader.readAsDataURL(this.files[0]);
|
|
}
|
|
else alert('Only PNG and GIF files are allowed at this time.');
|
|
}
|
|
});
|