mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Finished implementing project loading and saving

Browse Source
This commit is contained in:
unsettledgames
2020-06-28 16:57:19 +02:00
parent 2868363bb7
commit caa81dde1c
6 changed files with 137 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
js/_loadImage.js
View File

@ -1,13 +1,19 @@
document.getElementById('open-image-browse-holder').addEventListener('change', function () {
let fileName = document.getElementById("open-image-browse-holder").value;
let extension = fileName.substring(fileName.lastIndexOf('.')+1, fileName.length) || fileName;
if (this.files && this.files[0]) {
if (extension == 'png' || extension == 'gif' || extension == 'lpe') {
if (extension == 'lpe') {
let file = this.files[0];
let reader = new FileReader();
//make sure file is allowed filetype
var fileContentType = this.files[0].type;
console.log("File: " + fileContentType);
reader.readAsText(file, "UTF-8");
reader.onload = function (e) {
let dictionary = JSON.parse(e.target.result);
if (fileContentType == 'image/png' || fileContentType == 'image/gif' || fileContentType == '.lpe') {
if (fileContentType == '.lpe') {
console.log("OK");
newPixel(dictionary['canvasWidth'], dictionary['canvasHeight'], [], dictionary);
}
}
else {
//load file
@ -15,43 +21,12 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f
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);
createPaletteFromLayers();
//track google event
ga('send', 'event', 'Pixel Editor Load', colorPalette.length, this.width+'/'+this.height); /*global ga*/
@ -64,4 +39,4 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f
}
else alert('Only .lpe project files, PNG and GIF files are allowed at this time.');
}
});
});