2021-1-capstone-design1 / MAC_Project1

Go to a project
Toggle navigation Toggle navigation pinning
오윤석
5f65cc4f 1 parent 7c2e330f

using gif.js (dhdbstjr98 customized)

Inline Side-by-side
Showing 4 changed files with 116 additions and 17 deletions
......@@ -9,6 +9,7 @@
"license": "ISC",
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@dhdbstjr98/gif.js": "^1.0.0",
"gifencoder": "^2.0.1",
"hangul-js": "^0.2.6",
"stream": "0.0.2"
......@@ -1168,6 +1169,15 @@
"to-fast-properties": "^2.0.0"
}
},
"node_modules/@dhdbstjr98/gif.js": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@dhdbstjr98/gif.js/-/gif.js-1.0.0.tgz",
"integrity": "sha512-LI7RyCiTnEmuPBOPnIpZosT3zSuSGXwjdkjQC+HwiYKjBZeIozoKWhIwgE0w533rDUyRxM3dhmAMzlyIzKx/OQ==",
"dependencies": {
"buffer": "^6.0.3",
"events": "^3.3.0"
}
},
"node_modules/@discoveryjs/json-ext": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.2.tgz",
......@@ -1854,6 +1864,25 @@
"node": ">=0.10.0"
}
},
"node_modules/base64-js": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
]
},
"node_modules/bcrypt-pbkdf": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
......@@ -1953,6 +1982,29 @@
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
}
},
"node_modules/buffer": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
"integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
],
"dependencies": {
"base64-js": "^1.3.1",
"ieee754": "^1.2.1"
}
},
"node_modules/buffer-from": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
......@@ -2762,7 +2814,6 @@
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
"dev": true,
"engines": {
"node": ">=0.8.x"
}
......@@ -3466,6 +3517,25 @@
"node": ">=0.10.0"
}
},
"node_modules/ieee754": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
]
},
"node_modules/ignore-walk": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz",
......@@ -7314,6 +7384,15 @@
"to-fast-properties": "^2.0.0"
}
},
"@dhdbstjr98/gif.js": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@dhdbstjr98/gif.js/-/gif.js-1.0.0.tgz",
"integrity": "sha512-LI7RyCiTnEmuPBOPnIpZosT3zSuSGXwjdkjQC+HwiYKjBZeIozoKWhIwgE0w533rDUyRxM3dhmAMzlyIzKx/OQ==",
"requires": {
"buffer": "^6.0.3",
"events": "^3.3.0"
}
},
"@discoveryjs/json-ext": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.2.tgz",
......@@ -7923,6 +8002,11 @@
}
}
},
"base64-js": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
},
"bcrypt-pbkdf": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
......@@ -8006,6 +8090,15 @@
"node-releases": "^1.1.70"
}
},
"buffer": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
"integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
"requires": {
"base64-js": "^1.3.1",
"ieee754": "^1.2.1"
}
},
"buffer-from": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
......@@ -8664,8 +8757,7 @@
"events": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
"dev": true
"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
},
"execa": {
"version": "5.0.0",
......@@ -9248,6 +9340,11 @@
"safer-buffer": ">= 2.1.2 < 3"
}
},
"ieee754": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
},
"ignore-walk": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz",
......
......@@ -20,6 +20,7 @@
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@dhdbstjr98/gif.js": "^1.0.0",
"gifencoder": "^2.0.1",
"hangul-js": "^0.2.6",
"stream": "0.0.2"
......
import GIF from "gifencoder";
import GIF from "@dhdbstjr98/gif.js";
import { fabric } from "fabric";
import Component from "./components";
......@@ -12,23 +12,24 @@ export class GifGenerator {
}
_initializeGif() {
this.gif = new GIF(this.width, this.height);
this.gif.setTransparent(null);
this.gif.setRepeat(0);
this.gif.setQuality(10);
this.gif.start();
this.gif = new GIF({
width: this.width,
height: this.height,
transparent: null,
repeat: 0,
setQuality: 10,
});
}
_addFrame(delay = 0) {
this.gif.setDelay(delay);
this.gif.addFrame(this.canvas.getContext());
this.gif.addFrame(this.canvas.getContext(), { delay, copy: true });
}
_render() {
this.gif.finish();
const byte = new Uint8Array(this.gif.out.data);
return new Blob([byte], { type: "image/gif" });
_render(callback) {
this.gif.on("finished", (blob) => {
callback(blob);
});
this.gif.render();
}
make() {
......@@ -67,7 +68,7 @@ export class GifGenerator {
draw();
} else {
this.canvas.off("after:render", draw);
resolve(this._render());
this._render(resolve);
}
} else {
this.canvas.remove(
......
This diff could not be displayed because it is too large.