@lijuhong1981/jsgif 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +46 -1
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -134,7 +134,8 @@ function GifPlayer(options = {}) {
|
|
|
134
134
|
const CANVAS_CTX = CANVAS.getContext('2d');
|
|
135
135
|
const TEMP_CANVAS = document.createElement("canvas");//用来拿 imageData 的工具人
|
|
136
136
|
const TEMP_CANVAS_CTX = TEMP_CANVAS.getContext('2d', { willReadFrequently: true, }); // 工具人的 getContext('2d')
|
|
137
|
-
const
|
|
137
|
+
const ATLAS_CANVAS = document.createElement("canvas");
|
|
138
|
+
const FRAME_LIST = []; // 存放每一帧数据以及对应的延时
|
|
138
139
|
let GIF_INFO = {}; // GIF 的一些信息
|
|
139
140
|
let STREAM = null;
|
|
140
141
|
let LAST_DISPOSA_METHOD = null;
|
|
@@ -429,6 +430,21 @@ function GifPlayer(options = {}) {
|
|
|
429
430
|
}
|
|
430
431
|
};
|
|
431
432
|
|
|
433
|
+
function drawAtlasImage() {
|
|
434
|
+
const length = FRAME_LIST.length;
|
|
435
|
+
if (length > 0) {
|
|
436
|
+
ATLAS_CANVAS.width = CANVAS.width * length;
|
|
437
|
+
ATLAS_CANVAS.height = CANVAS.height;
|
|
438
|
+
const context = ATLAS_CANVAS.getContext('2d');
|
|
439
|
+
let dx = 0;
|
|
440
|
+
for (let i = 0; i < length; i++) {
|
|
441
|
+
const frame = FRAME_LIST[i];
|
|
442
|
+
context.putImageData(frame.imgData, dx, 0);
|
|
443
|
+
dx += CANVAS.width;
|
|
444
|
+
}
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
|
|
432
448
|
function getNextFrameIndex() {
|
|
433
449
|
if (currentFrameIndex === -1)
|
|
434
450
|
return options.reverse ? FRAME_LIST.length - 1 : 0;
|
|
@@ -490,6 +506,7 @@ function GifPlayer(options = {}) {
|
|
|
490
506
|
reset();
|
|
491
507
|
parseHeader();
|
|
492
508
|
parseBlock();
|
|
509
|
+
drawAtlasImage();
|
|
493
510
|
stopGif();
|
|
494
511
|
if (options.autoPlay)
|
|
495
512
|
playGif();
|
|
@@ -532,6 +549,21 @@ function GifPlayer(options = {}) {
|
|
|
532
549
|
return CANVAS;
|
|
533
550
|
},
|
|
534
551
|
},
|
|
552
|
+
atlasCanvas: {
|
|
553
|
+
get: function () {
|
|
554
|
+
return ATLAS_CANVAS;
|
|
555
|
+
},
|
|
556
|
+
},
|
|
557
|
+
frameWidth: {
|
|
558
|
+
get: function () {
|
|
559
|
+
return CANVAS.width;
|
|
560
|
+
}
|
|
561
|
+
},
|
|
562
|
+
frameHeight: {
|
|
563
|
+
get: function () {
|
|
564
|
+
return CANVAS.height;
|
|
565
|
+
}
|
|
566
|
+
},
|
|
535
567
|
framesNumber: {
|
|
536
568
|
get: function () {
|
|
537
569
|
return FRAME_LIST.length;
|
|
@@ -547,6 +579,11 @@ function GifPlayer(options = {}) {
|
|
|
547
579
|
return currentFrameIndex;
|
|
548
580
|
}
|
|
549
581
|
},
|
|
582
|
+
frameList: {
|
|
583
|
+
get: function () {
|
|
584
|
+
return FRAME_LIST;
|
|
585
|
+
}
|
|
586
|
+
},
|
|
550
587
|
reverse: {
|
|
551
588
|
set: function (value) {
|
|
552
589
|
Check.typeOf.bool('reverse', value);
|
|
@@ -565,6 +602,14 @@ function GifPlayer(options = {}) {
|
|
|
565
602
|
return options.timeScale;
|
|
566
603
|
}
|
|
567
604
|
},
|
|
605
|
+
onFrameChanged: {
|
|
606
|
+
set: function (value) {
|
|
607
|
+
options.onFrameChanged = value;
|
|
608
|
+
},
|
|
609
|
+
get: function () {
|
|
610
|
+
return options.onFrameChanged;
|
|
611
|
+
}
|
|
612
|
+
},
|
|
568
613
|
});
|
|
569
614
|
|
|
570
615
|
return player;
|