png export
parent
16de24466f
commit
65887ec926
|
@ -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;
|
||||
|
|
|
@ -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';
|
||||
|
|
44
app/page.ts
44
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';
|
||||
|
@ -41,7 +43,7 @@ export class Page {
|
|||
}
|
||||
]
|
||||
};
|
||||
//blank slate canvas data
|
||||
// blank slate canvas data
|
||||
this.canvasData = {
|
||||
width: 0,
|
||||
height: 0,
|
||||
|
@ -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');
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -174,21 +188,21 @@ export class Page {
|
|||
|
||||
this.canvasHandler.ResizeCanvas();
|
||||
|
||||
//set framedata initialized to true
|
||||
// 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;
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue