png export

master
Beau Blyth 2019-09-27 19:29:42 -07:00
parent 16de24466f
commit 65887ec926
6 changed files with 6353 additions and 26 deletions

View File

@ -18,8 +18,8 @@ export class FileHandler {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (event: any) => { reader.onload = (event: ProgressEvent<FileReader>) => {
resolve(event.target!.result); resolve(event.target!.result as string);
}; };
reader.onerror = reject; reader.onerror = reject;

View File

@ -67,6 +67,10 @@ export class FrameHandler {
this.playingAnimation = false; this.playingAnimation = false;
} }
public GetFilenames(): string[] {
return this.filenames;
}
private RefreshImage() { private RefreshImage() {
if (this.filenames.length === 0) { if (this.filenames.length === 0) {
this.frameNumberDiv.className = 'warning'; this.frameNumberDiv.className = 'warning';

View File

@ -1,3 +1,5 @@
import { saveAs } from 'file-saver';
import * as JSZip from 'jszip';
import { CanvasHandler } from './canvas_handler'; import { CanvasHandler } from './canvas_handler';
import { FileHandler } from './file_handler'; import { FileHandler } from './file_handler';
import { FrameHandler } from './frame_handler'; import { FrameHandler } from './frame_handler';
@ -41,7 +43,7 @@ export class Page {
} }
] ]
}; };
//blank slate canvas data // blank slate canvas data
this.canvasData = { this.canvasData = {
width: 0, width: 0,
height: 0, height: 0,
@ -139,11 +141,23 @@ export class Page {
} }
case 83: { case 83: {
// s const zip = new JSZip();
if (document.activeElement !== this.filenameInput) { // name of project
this.download(this.filenameInput.value + '.anim', JSON.stringify(this.animationData)); const name = this.filenameInput.value;
// .anim file
zip.file(name + '.anim', JSON.stringify(this.animationData));
// pngs
const filenames = this.frameHandler.GetFilenames();
for (let i = 0; i < filenames.length; i++) {
const filedata = filenames[i].split('base64,')[1];
const padding = i;
zip.file(name + padding.toString() + '.png', filedata, { base64: true });
} }
break; // save zip
zip.generateAsync({ type: 'blob' }).then((content) => {
// see FileSaver.js
saveAs(content, name + '.zip');
});
} }
} }
}; };
@ -174,21 +188,21 @@ export class Page {
this.canvasHandler.ResizeCanvas(); this.canvasHandler.ResizeCanvas();
//set framedata initialized to true // set framedata initialized to true
}; };
private download(filename: string, text: string) { // private download(filename: string, text: string) {
var element = document.createElement('a'); // var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); // element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename); // element.setAttribute('download', filename);
element.style.display = 'none'; // element.style.display = 'none';
document.body.appendChild(element); // document.body.appendChild(element);
element.click(); // element.click();
document.body.removeChild(element); // document.body.removeChild(element);
} // }
private updateFrameRate = () => { private updateFrameRate = () => {
this.animationData.frameRate = this.frameRateInput.valueAsNumber; this.animationData.frameRate = this.frameRateInput.valueAsNumber;

6260
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -27,5 +27,11 @@
"webpack": "^4.41.0", "webpack": "^4.41.0",
"webpack-cli": "^3.3.9", "webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1" "webpack-dev-server": "^3.8.1"
},
"dependencies": {
"@types/file-saver": "^2.0.1",
"@types/jszip": "^3.1.6",
"file-saver": "^2.0.2",
"jszip": "^3.2.2"
} }
} }

View File

@ -1,3 +1,8 @@
dependencies:
'@types/file-saver': 2.0.1
'@types/jszip': 3.1.6
file-saver: 2.0.2
jszip: 3.2.2
devDependencies: devDependencies:
prettier: 1.18.2 prettier: 1.18.2
ts-loader: 6.1.2_typescript@3.6.3 ts-loader: 6.1.2_typescript@3.6.3
@ -27,6 +32,10 @@ packages:
dev: true dev: true
resolution: resolution:
integrity: sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g== integrity: sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
/@types/file-saver/2.0.1:
dev: false
resolution:
integrity: sha512-g1QUuhYVVAamfCifK7oB7G3aIl4BbOyzDOqVyUfEr4tfBKrXfeH+M+Tg7HKCXSrbzxYdhyCP7z9WbKo0R2hBCw==
/@types/glob/7.1.1: /@types/glob/7.1.1:
dependencies: dependencies:
'@types/events': 3.0.0 '@types/events': 3.0.0
@ -35,6 +44,12 @@ packages:
dev: true dev: true
resolution: resolution:
integrity: sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w== integrity: sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==
/@types/jszip/3.1.6:
dependencies:
'@types/node': 12.7.8
dev: false
resolution:
integrity: sha512-m8uFcI+O2EupCfbEVQWsBM/4nhbegjOHL7cQgBpM95FeF98kdFJXzy9/8yhx4b3lCRl/gMBhcvyh30Qt3X+XPQ==
/@types/minimatch/3.0.3: /@types/minimatch/3.0.3:
dev: true dev: true
resolution: resolution:
@ -43,6 +58,10 @@ packages:
dev: true dev: true
resolution: resolution:
integrity: sha512-4jUncNe2tj1nmrO/34PsRpZqYVnRV1svbU78cKhuQKkMntKB/AmdLyGgswcZKjFHEHGpiY8pVD8CuVI55nP54w== integrity: sha512-4jUncNe2tj1nmrO/34PsRpZqYVnRV1svbU78cKhuQKkMntKB/AmdLyGgswcZKjFHEHGpiY8pVD8CuVI55nP54w==
/@types/node/12.7.8:
dev: false
resolution:
integrity: sha512-FMdVn84tJJdV+xe+53sYiZS4R5yn1mAIxfj+DVoNiQjTYz1+OYmjwEZr1ev9nU0axXwda0QDbYl06QHanRVH3A==
/@webassemblyjs/ast/1.8.5: /@webassemblyjs/ast/1.8.5:
dependencies: dependencies:
'@webassemblyjs/helper-module-context': 1.8.5 '@webassemblyjs/helper-module-context': 1.8.5
@ -813,7 +832,6 @@ packages:
resolution: resolution:
integrity: sha1-Z29us8OZl8LuGsOpJP1hJHSPV40= integrity: sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
/core-util-is/1.0.2: /core-util-is/1.0.2:
dev: true
resolution: resolution:
integrity: sha1-tf1UIgqivFq1eqtxQMlAdUUDwac= integrity: sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
/create-ecdh/4.0.3: /create-ecdh/4.0.3:
@ -1316,6 +1334,10 @@ packages:
dev: true dev: true
resolution: resolution:
integrity: sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w== integrity: sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
/file-saver/2.0.2:
dev: false
resolution:
integrity: sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw==
/fill-range/4.0.0: /fill-range/4.0.0:
dependencies: dependencies:
extend-shallow: 2.0.1 extend-shallow: 2.0.1
@ -1737,6 +1759,10 @@ packages:
dev: true dev: true
resolution: resolution:
integrity: sha1-xg7taebY/bazEEofy8ocGS3FtQE= integrity: sha1-xg7taebY/bazEEofy8ocGS3FtQE=
/immediate/3.0.6:
dev: false
resolution:
integrity: sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
/import-local/2.0.0: /import-local/2.0.0:
dependencies: dependencies:
pkg-dir: 3.0.0 pkg-dir: 3.0.0
@ -1773,7 +1799,6 @@ packages:
resolution: resolution:
integrity: sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4= integrity: sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
/inherits/2.0.4: /inherits/2.0.4:
dev: true
resolution: resolution:
integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
/ini/1.3.5: /ini/1.3.5:
@ -2026,7 +2051,6 @@ packages:
resolution: resolution:
integrity: sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0= integrity: sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
/isarray/1.0.0: /isarray/1.0.0:
dev: true
resolution: resolution:
integrity: sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE= integrity: sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
/isexe/2.0.0: /isexe/2.0.0:
@ -2078,6 +2102,15 @@ packages:
hasBin: true hasBin: true
resolution: resolution:
integrity: sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow== integrity: sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
/jszip/3.2.2:
dependencies:
lie: 3.3.0
pako: 1.0.10
readable-stream: 2.3.6
set-immediate-shim: 1.0.1
dev: false
resolution:
integrity: sha512-NmKajvAFQpbg3taXQXr/ccS2wcucR1AZ+NtyWp2Nq7HHVsXhcJFR8p0Baf32C2yVvBylFWVeKf+WI2AnvlPhpA==
/killable/1.0.1: /killable/1.0.1:
dev: true dev: true
resolution: resolution:
@ -2118,6 +2151,12 @@ packages:
node: '>=6' node: '>=6'
resolution: resolution:
integrity: sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA== integrity: sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==
/lie/3.3.0:
dependencies:
immediate: 3.0.6
dev: false
resolution:
integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
/loader-runner/2.4.0: /loader-runner/2.4.0:
dev: true dev: true
engines: engines:
@ -2650,7 +2689,6 @@ packages:
resolution: resolution:
integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ== integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
/pako/1.0.10: /pako/1.0.10:
dev: true
resolution: resolution:
integrity: sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw== integrity: sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
/parallel-transform/1.2.0: /parallel-transform/1.2.0:
@ -2804,7 +2842,6 @@ packages:
resolution: resolution:
integrity: sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw== integrity: sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==
/process-nextick-args/2.0.1: /process-nextick-args/2.0.1:
dev: true
resolution: resolution:
integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag== integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
/process/0.11.10: /process/0.11.10:
@ -2938,7 +2975,6 @@ packages:
safe-buffer: 5.1.2 safe-buffer: 5.1.2
string_decoder: 1.1.1 string_decoder: 1.1.1
util-deprecate: 1.0.2 util-deprecate: 1.0.2
dev: true
resolution: resolution:
integrity: sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw== integrity: sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
/readable-stream/3.4.0: /readable-stream/3.4.0:
@ -3078,7 +3114,6 @@ packages:
resolution: resolution:
integrity: sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec= integrity: sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=
/safe-buffer/5.1.2: /safe-buffer/5.1.2:
dev: true
resolution: resolution:
integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
/safe-buffer/5.2.0: /safe-buffer/5.2.0:
@ -3178,6 +3213,12 @@ packages:
dev: true dev: true
resolution: resolution:
integrity: sha1-BF+XgtARrppoA93TgrJDkrPYkPc= integrity: sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
/set-immediate-shim/1.0.1:
dev: false
engines:
node: '>=0.10.0'
resolution:
integrity: sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
/set-value/2.0.1: /set-value/2.0.1:
dependencies: dependencies:
extend-shallow: 2.0.1 extend-shallow: 2.0.1
@ -3431,7 +3472,6 @@ packages:
/string_decoder/1.1.1: /string_decoder/1.1.1:
dependencies: dependencies:
safe-buffer: 5.1.2 safe-buffer: 5.1.2
dev: true
resolution: resolution:
integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg== integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
/string_decoder/1.3.0: /string_decoder/1.3.0:
@ -3745,7 +3785,6 @@ packages:
resolution: resolution:
integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ== integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
/util-deprecate/1.0.2: /util-deprecate/1.0.2:
dev: true
resolution: resolution:
integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8= integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
/util/0.10.3: /util/0.10.3:
@ -4053,6 +4092,10 @@ packages:
resolution: resolution:
integrity: sha512-HG/DWAJa1PAnHT9JAhNa8AbAv3FPaiLzioSjCcmuXXhP8MlpHO5vwls4g4j6n30Z74GVQj8Xa62dWVx1QCGklg== integrity: sha512-HG/DWAJa1PAnHT9JAhNa8AbAv3FPaiLzioSjCcmuXXhP8MlpHO5vwls4g4j6n30Z74GVQj8Xa62dWVx1QCGklg==
specifiers: specifiers:
'@types/file-saver': ^2.0.1
'@types/jszip': ^3.1.6
file-saver: ^2.0.2
jszip: ^3.2.2
prettier: ^1.18.2 prettier: ^1.18.2
ts-loader: ^6.1.2 ts-loader: ^6.1.2
tslint: ^5.20.0 tslint: ^5.20.0