using gif.js (dhdbstjr98 customized)

오윤석
Commit 5f65cc4f2613b8e36dbe40cbc56d7dcd65d8a2b1 5f65cc4f 1 parent 7c2e330f
Showing 4 changed files with 116 additions and 17 deletions
src/gif-generator/package-lock.json
src/gif-generator/package.json
src/gif-generator/src/index.js
src/gif-generator/yarn.lock
--- a/src/gif-generator/package-lock.json
View file @5f65cc4
+++ b/src/gif-generator/package-lock.json
View file @5f65cc4
@@ -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==",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
-      "dev": true
     },
     "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",
--- a/src/gif-generator/package.json
View file @5f65cc4
+++ b/src/gif-generator/package.json
View file @5f65cc4
@@ -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"
--- a/src/gif-generator/src/index.js
View file @5f65cc4
+++ b/src/gif-generator/src/index.js
View file @5f65cc4
-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 = new GIF({
-    this.gif.setTransparent(null);
+      width: this.width,
-    this.gif.setRepeat(0);
+      height: this.height,
-    this.gif.setQuality(10);
+      transparent: null,
-    this.gif.start();
+      repeat: 0,
+      setQuality: 10,
+    });
   }
   _addFrame(delay = 0) {
-    this.gif.setDelay(delay);
+    this.gif.addFrame(this.canvas.getContext(), { delay, copy: true });
-    this.gif.addFrame(this.canvas.getContext());
   }
-  _render() {
+  _render(callback) {
-    this.gif.finish();
+    this.gif.on("finished", (blob) => {
-    const byte = new Uint8Array(this.gif.out.data);
+      callback(blob);
-
+    });
-    return new Blob([byte], { type: "image/gif" });
+    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(
--- a/src/gif-generator/yarn.lock
View file @5f65cc4
+++ b/src/gif-generator/yarn.lock
View file @5f65cc4