png export

app/file_handler.ts

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

app/frame_handler.ts

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

app/page.ts

@@ -1,3 +1,5 @@
+import { saveAs } from 'file-saver';
+import * as JSZip from 'jszip';
 import { CanvasHandler } from './canvas_handler';
 import { FileHandler } from './file_handler';
 import { FrameHandler } from './frame_handler';
@@ -139,11 +141,23 @@ export class Page {
 				}
 
 				case 83: {
-					// s
-					if (document.activeElement !== this.filenameInput) {
-						this.download(this.filenameInput.value + '.anim', JSON.stringify(this.animationData));
+					const zip = new JSZip();
+					// name of project
+					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');
+					});
 				}
 			}
 		};
@@ -177,18 +191,18 @@ export class Page {
 		// set framedata initialized to true
 	};
 
-	private download(filename: string, text: string) {
-		var element = document.createElement('a');
-		element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
-		element.setAttribute('download', filename);
+	// private download(filename: string, text: string) {
+	// 	var element = document.createElement('a');
+	// 	element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+	// 	element.setAttribute('download', filename);
 
-		element.style.display = 'none';
-		document.body.appendChild(element);
+	// 	element.style.display = 'none';
+	// 	document.body.appendChild(element);
 
-		element.click();
+	// 	element.click();
 
-		document.body.removeChild(element);
-	}
+	// 	document.body.removeChild(element);
+	// }
 
 	private updateFrameRate = () => {
 		this.animationData.frameRate = this.frameRateInput.valueAsNumber;

package.json

@@ -27,5 +27,11 @@
     "webpack": "^4.41.0",
     "webpack-cli": "^3.3.9",
     "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"
   }
 }

pnpm-lock.yaml

@@ -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:
   prettier: 1.18.2
   ts-loader: 6.1.2_typescript@3.6.3
@@ -27,6 +32,10 @@ packages:
     dev: true
     resolution:
       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:
     dependencies:
       '@types/events': 3.0.0
@@ -35,6 +44,12 @@ packages:
     dev: true
     resolution:
       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:
     dev: true
     resolution:
@@ -43,6 +58,10 @@ packages:
     dev: true
     resolution:
       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:
     dependencies:
       '@webassemblyjs/helper-module-context': 1.8.5
@@ -813,7 +832,6 @@ packages:
     resolution:
       integrity: sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
   /core-util-is/1.0.2:
-    dev: true
     resolution:
       integrity: sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
   /create-ecdh/4.0.3:
@@ -1316,6 +1334,10 @@ packages:
     dev: true
     resolution:
       integrity: sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
+  /file-saver/2.0.2:
+    dev: false
+    resolution:
+      integrity: sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw==
   /fill-range/4.0.0:
     dependencies:
       extend-shallow: 2.0.1
@@ -1737,6 +1759,10 @@ packages:
     dev: true
     resolution:
       integrity: sha1-xg7taebY/bazEEofy8ocGS3FtQE=
+  /immediate/3.0.6:
+    dev: false
+    resolution:
+      integrity: sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
   /import-local/2.0.0:
     dependencies:
       pkg-dir: 3.0.0
@@ -1773,7 +1799,6 @@ packages:
     resolution:
       integrity: sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
   /inherits/2.0.4:
-    dev: true
     resolution:
       integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
   /ini/1.3.5:
@@ -2026,7 +2051,6 @@ packages:
     resolution:
       integrity: sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
   /isarray/1.0.0:
-    dev: true
     resolution:
       integrity: sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
   /isexe/2.0.0:
@@ -2078,6 +2102,15 @@ packages:
     hasBin: true
     resolution:
       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:
     dev: true
     resolution:
@@ -2118,6 +2151,12 @@ packages:
       node: '>=6'
     resolution:
       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:
     dev: true
     engines:
@@ -2650,7 +2689,6 @@ packages:
     resolution:
       integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
   /pako/1.0.10:
-    dev: true
     resolution:
       integrity: sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
   /parallel-transform/1.2.0:
@@ -2804,7 +2842,6 @@ packages:
     resolution:
       integrity: sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==
   /process-nextick-args/2.0.1:
-    dev: true
     resolution:
       integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
   /process/0.11.10:
@@ -2938,7 +2975,6 @@ packages:
       safe-buffer: 5.1.2
       string_decoder: 1.1.1
       util-deprecate: 1.0.2
-    dev: true
     resolution:
       integrity: sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
   /readable-stream/3.4.0:
@@ -3078,7 +3114,6 @@ packages:
     resolution:
       integrity: sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=
   /safe-buffer/5.1.2:
-    dev: true
     resolution:
       integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
   /safe-buffer/5.2.0:
@@ -3178,6 +3213,12 @@ packages:
     dev: true
     resolution:
       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:
     dependencies:
       extend-shallow: 2.0.1
@@ -3431,7 +3472,6 @@ packages:
   /string_decoder/1.1.1:
     dependencies:
       safe-buffer: 5.1.2
-    dev: true
     resolution:
       integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
   /string_decoder/1.3.0:
@@ -3745,7 +3785,6 @@ packages:
     resolution:
       integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
   /util-deprecate/1.0.2:
-    dev: true
     resolution:
       integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
   /util/0.10.3:
@@ -4053,6 +4092,10 @@ packages:
     resolution:
       integrity: sha512-HG/DWAJa1PAnHT9JAhNa8AbAv3FPaiLzioSjCcmuXXhP8MlpHO5vwls4g4j6n30Z74GVQj8Xa62dWVx1QCGklg==
 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
   ts-loader: ^6.1.2
   tslint: ^5.20.0