-
-
Notifications
You must be signed in to change notification settings - Fork 422
/
Gif.ts
47 lines (43 loc) · 1.25 KB
/
Gif.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import { fabric } from 'fabric';
import 'gifler';
const Gif = fabric.util.createClass(fabric.Image, {
type: 'gif',
superType: 'image',
gifCanvas: null,
gifler: undefined,
isStarted: false,
initialize(options: any) {
options = options || {};
this.gifCanvas = document.createElement('canvas');
this.callSuper('initialize', this.gifCanvas, options);
},
drawFrame(ctx: CanvasRenderingContext2D, frame: any) {
// update canvas size
this.gifCanvas.width = frame.width;
this.gifCanvas.height = frame.height;
// update canvas that we are using for fabric.js
ctx.drawImage(frame.buffer, 0, 0);
this.canvas?.renderAll();
},
_render(ctx: CanvasRenderingContext2D) {
this.callSuper('_render', ctx);
this.dirty = true;
if (!this.isStarted) {
this.isStarted = true;
this.gifler = window
// @ts-ignore
.gifler('https://themadcreator.github.io/gifler/assets/gif/nyan.gif')
// .gifler('./images/sample/earth.gif')
.frames(this.gifCanvas, (context: CanvasRenderingContext2D, frame: any) => {
this.isStarted = true;
this.drawFrame(context, frame);
});
}
},
});
Gif.fromObject = (options: any, callback: (obj: any) => any) => {
return callback(new Gif(options));
};
// @ts-ignore
window.fabric.Gif = Gif;
export default Gif;