pixel-editor/js/_loadImage.js

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.');
	}
});