@lijuhong1981/jsgif 1.0.3 → 1.0.5

package/index.js

@@ -134,7 +134,8 @@ function GifPlayer(options = {}) {
     const CANVAS_CTX = CANVAS.getContext('2d');
     const TEMP_CANVAS = document.createElement("canvas");//用来拿 imageData 的工具人
     const TEMP_CANVAS_CTX = TEMP_CANVAS.getContext('2d', { willReadFrequently: true, }); // 工具人的 getContext('2d')
-    const FRAME_LIST = []; // 存放每一帧以及对应的延时
+    const ATLAS_CANVAS = document.createElement("canvas");
+    const FRAME_LIST = []; // 存放每一帧数据以及对应的延时
     let GIF_INFO = {}; // GIF 的一些信息
     let STREAM = null;
     let LAST_DISPOSA_METHOD = null;
@@ -429,6 +430,21 @@ function GifPlayer(options = {}) {
         }
     };
 
+    function drawAtlasImage() {
+        const length = FRAME_LIST.length;
+        if (length > 0) {
+            ATLAS_CANVAS.width = CANVAS.width * length;
+            ATLAS_CANVAS.height = CANVAS.height;
+            const context = ATLAS_CANVAS.getContext('2d');
+            let dx = 0;
+            for (let i = 0; i < length; i++) {
+                const frame = FRAME_LIST[i];
+                context.putImageData(frame.imgData, dx, 0);
+                dx += CANVAS.width;
+            }
+        }
+    }
+
     function getNextFrameIndex() {
         if (currentFrameIndex === -1)
             return options.reverse ? FRAME_LIST.length - 1 : 0;
@@ -445,6 +461,9 @@ function GifPlayer(options = {}) {
     function doCurrentFrame() {
         const frame = FRAME_LIST[currentFrameIndex];
         drawFrame(frame);
+        if (typeof options.onFrameChanged === 'function') {
+            options.onFrameChanged(currentFrameIndex, frame);
+        }
         setTimeout(function () {
             if (!isPlaying)
                 return;
@@ -490,6 +509,7 @@ function GifPlayer(options = {}) {
                 reset();
                 parseHeader();
                 parseBlock();
+                drawAtlasImage();
                 stopGif();
                 if (options.autoPlay)
                     playGif();
@@ -532,6 +552,21 @@ function GifPlayer(options = {}) {
                 return CANVAS;
             },
         },
+        atlasCanvas: {
+            get: function () {
+                return ATLAS_CANVAS;
+            },
+        },
+        frameWidth: {
+            get: function () {
+                return CANVAS.width;
+            }
+        },
+        frameHeight: {
+            get: function () {
+                return CANVAS.height;
+            }
+        },
         framesNumber: {
             get: function () {
                 return FRAME_LIST.length;
@@ -547,6 +582,11 @@ function GifPlayer(options = {}) {
                 return currentFrameIndex;
             }
         },
+        frameList: {
+            get: function () {
+                return FRAME_LIST;
+            }
+        },
         reverse: {
             set: function (value) {
                 Check.typeOf.bool('reverse', value);
@@ -565,6 +605,14 @@ function GifPlayer(options = {}) {
                 return options.timeScale;
             }
         },
+        onFrameChanged: {
+            set: function (value) {
+                options.onFrameChanged = value;
+            },
+            get: function () {
+                return options.onFrameChanged;
+            }
+        },
     });
 
     return player;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lijuhong1981/jsgif",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "> TODO: description",
   "author": "lijuhong1981",
   "homepage": "https://github.com/lijuhong1981/jslibs#readme",