Merge pull request #50 from Lumen5/feat/remove-canvas-deps

feat(*): remove canvas dependency
Lumen5 · Jan 4, 2024 · 520eaa4 · 520eaa4
2 parents 689b02b + 5464578
commit 520eaa4
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 22 deletions.
diff --git a/examples/mini-framefusion-example/vite.config.ts b/examples/mini-framefusion-example/vite.config.ts
@@ -18,7 +18,6 @@ export default defineConfig({
                 'path',
                 'fs',
                 '@pixi/node',
-                'canvas',
                 'framefusion',
                 'child_process',
                 'rimraf',

diff --git a/framefusion.ts b/framefusion.ts
@@ -1,4 +1,4 @@
-import type { ImageData } from 'canvas';
+import type { ImageData } from './src/types';
 import { BeamcoderExtractor } from './src/backends/beamcoder.js';
 
 export type Frame = {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lumen5/framefusion",
-  "version": "0.0.26",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "docs": "typedoc framefusion.ts",
@@ -20,7 +20,6 @@
   },
   "dependencies": {
     "@antoinemopa/beamcoder": "^0.7.4",
-    "canvas": "^2.9.1",
     "fs-extra": "^11.1.1",
     "tmp": "^0.2.1"
   },
@@ -36,6 +35,7 @@
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
     "@vitest/ui": "^0.29.8",
+    "canvas": "^2.9.1",
     "eslint": "^8.38.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.27.5",

diff --git a/src/BaseExtractor.ts b/src/BaseExtractor.ts
@@ -1,10 +1,10 @@
-import type { ImageData } from 'canvas';
-
 import type {
     ExtractorArgs,
     Frame,
     Extractor
 } from '../framefusion';
+import type { ImageData } from './types';
+
 
 export class BaseExtractor implements Extractor {
     static async create(args: ExtractorArgs): Promise<Extractor> {

diff --git a/src/backends/beamcoder.ts b/src/backends/beamcoder.ts
@@ -6,8 +6,7 @@ import type {
     Frame
 } from '@antoinemopa/beamcoder';
 import beamcoder from '@antoinemopa/beamcoder';
-import type { ImageData } from 'canvas';
-import { createImageData } from 'canvas';
+import type { ImageData } from '../types';
 import { BaseExtractor } from '../BaseExtractor';
 import type { Extractor, ExtractorArgs, InterpolateMode } from '../../framefusion';
 import { DownloadVideoURL } from '../DownloadVideoURL';
@@ -256,12 +255,12 @@ export class BeamcoderExtractor extends BaseExtractor implements Extractor {
             return null;
         }
         const rawData = this._resizeFrameData(frame);
-        const image = createImageData(
-            rawData,
-            frame.width,
-            frame.height
-        ) as ImageData;
-        return image;
+
+        return {
+            data: rawData,
+            width: frame.width,
+            height: frame.height,
+        };
     }
 
     /**

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -0,0 +1,5 @@
+export type ImageData = {
+    data: Uint8ClampedArray;
+    width: number;
+    height: number;
+};
diff --git a/test/framefusion.test.ts b/test/framefusion.test.ts
@@ -6,7 +6,7 @@ import {
     beforeAll
 } from 'vitest';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import { createCanvas } from 'canvas';
+import { createCanvas, createImageData } from 'canvas';
 import httpServer from 'http-server';
 import { BeamcoderExtractor } from '../src/backends/beamcoder';
 
@@ -171,12 +171,13 @@ describe('FrameFusion', () => {
 
         for (let i = 0; i < times.length; i++) {
             const imageData = await extractor.getImageDataAtTime(times[i]); // 3
+            const canvasImageData = createImageData(imageData.data, imageData.width, imageData.height);
             if (!imageData) {
                 throw new Error(`Failed to get image data for time ${times[i]}`);
             }
             const canvas = createCanvas(imageData.width, imageData.height);
             const ctx = canvas.getContext('2d');
-            ctx.putImageData(imageData, 0, 0);
+            ctx.putImageData(canvasImageData, 0, 0);
             expect(canvas.toBuffer('image/png')).toMatchImageSnapshot();
         }
 
@@ -202,9 +203,10 @@ describe('FrameFusion', () => {
             if (!imageData) {
                 throw new Error(`Failed to get image data for time ${times[i]}`);
             }
+            const canvasImageData = createImageData(imageData.data, imageData.width, imageData.height);
             const canvas = createCanvas(imageData.width, imageData.height);
             const ctx = canvas.getContext('2d');
-            ctx.putImageData(imageData, 0, 0);
+            ctx.putImageData(canvasImageData, 0, 0);
             expect(canvas.toBuffer('image/png')).toMatchImageSnapshot();
         }
 
@@ -297,9 +299,10 @@ describe('FrameFusion', () => {
             if (!imageData) {
                 continue;
             }
+            const canvasImageData = createImageData(imageData.data, imageData.width, imageData.height);
             const canvas = createCanvas(imageData.width, imageData.height);
             const ctx = canvas.getContext('2d');
-            ctx.putImageData(imageData, 0, 0);
+            ctx.putImageData(canvasImageData, 0, 0);
             expect(canvas.toBuffer('image/png')).toMatchImageSnapshot();
         }
 
@@ -333,9 +336,10 @@ describe('FrameFusion', () => {
             if (!imageData) {
                 continue;
             }
+            const canvasImageData = createImageData(imageData.data, imageData.width, imageData.height);
             const canvas = createCanvas(imageData.width, imageData.height);
             const ctx = canvas.getContext('2d');
-            ctx.putImageData(imageData, 0, 0);
+            ctx.putImageData(canvasImageData, 0, 0);
             expect(canvas.toBuffer('image/png')).toMatchImageSnapshot();
         }
 
@@ -359,9 +363,10 @@ describe('FrameFusion', () => {
             if (!imageData) {
                 continue;
             }
+            const canvasImageData = createImageData(imageData.data, imageData.width, imageData.height);
             const canvas = createCanvas(imageData.width, imageData.height);
             const ctx = canvas.getContext('2d');
-            ctx.putImageData(imageData, 0, 0);
+            ctx.putImageData(canvasImageData, 0, 0);
             expect(canvas.toBuffer('image/png')).toMatchImageSnapshot();
         }
 
@@ -389,9 +394,10 @@ describe('FrameFusion', () => {
             if (!imageData) {
                 continue;
             }
+            const canvasImageData = createImageData(imageData.data, imageData.width, imageData.height);
             const canvas = createCanvas(imageData.width, imageData.height);
             const ctx = canvas.getContext('2d');
-            ctx.putImageData(imageData, 0, 0);
+            ctx.putImageData(canvasImageData, 0, 0);
             expect(canvas.toBuffer('image/png')).toMatchImageSnapshot();
         }
 
@@ -415,9 +421,10 @@ describe('FrameFusion', () => {
             if (!imageData) {
                 continue;
             }
+            const canvasImageData = createImageData(imageData.data, imageData.width, imageData.height);
             const canvas = createCanvas(imageData.width, imageData.height);
             const ctx = canvas.getContext('2d');
-            ctx.putImageData(imageData, 0, 0);
+            ctx.putImageData(canvasImageData, 0, 0);
             expect(canvas.toBuffer('image/png')).toMatchImageSnapshot();
         }