fix cropping, probably, in new code path

lguzzon-scratchbook · Sep 22, 2024 · 3676c7f · 3676c7f
1 parent 92808e2
commit 3676c7f
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/src/components/new-message.svelte b/src/components/new-message.svelte
@@ -39,7 +39,10 @@
 				currentFrameNumber = frameNumber;
 			}
 
-			const filmstripData = await generateFilmstripWithCallback(videoElement, handleFrame);
+			const filmstripData = await generateFilmstripWithCallback(videoElement, handleFrame, {
+				width: 200,
+				height: 150
+			});
 			const optimizedImageArrayBuffer = uPNG.encode(
 				[filmstripData.data.buffer],
 				filmstripData.width,

diff --git a/src/routes/(app)/camera/+page.svelte b/src/routes/(app)/camera/+page.svelte
@@ -61,7 +61,10 @@
 				currentFrameNumber = frameNumber;
 			}
 
-			const filmstripData = await generateFilmstripWithCallback(videoElement, handleFrame);
+			const filmstripData = await generateFilmstripWithCallback(videoElement, handleFrame, {
+				width,
+				height
+			});
 			const gifBlob = await generateGIF(
 				filmstripData,
 				$colorPalette as [string, string],

diff --git a/src/utils/frames.ts b/src/utils/frames.ts
@@ -1,21 +1,30 @@
 import Dither from 'canvas-dither';
 
+import { getCrop } from './webcam';
+
 interface FilmstripOptions {
 	frameCount: number;
 	frameRate: number;
+	width: number;
+	height: number;
 }
 
 const defaultFilmstripOptions: FilmstripOptions = {
 	frameCount: 20,
-	frameRate: 10
+	frameRate: 10,
+	width: 200,
+	height: 150
 };
 
 export function generateFilmstripWithCallback(
 	video: HTMLVideoElement,
 	frameCallback: (frameNumber: number) => void,
 	filmstripOptions?: Partial<FilmstripOptions> | undefined
 ): Promise<ImageData> {
-	const { frameCount, frameRate } = { ...defaultFilmstripOptions, ...filmstripOptions };
+	const { frameCount, frameRate, width, height } = {
+		...defaultFilmstripOptions,
+		...filmstripOptions
+	};
 
 	return new Promise((resolve, reject) => {
 		let canvas: HTMLCanvasElement = document.createElement('canvas');
@@ -36,7 +45,20 @@ export function generateFilmstripWithCallback(
 
 			// iterate through frames
 			if (capturedFrameCount < frameCount) {
-				context.drawImage(video, 0, capturedFrameCount * video.height, video.width, video.height);
+				const { x, y, width: cropWidth, height: cropHeight } = getCrop(video, width / height);
+				context.drawImage(
+					video,
+					x,
+					y,
+					cropWidth,
+					cropHeight, // source (webcam)
+					0,
+					capturedFrameCount * height,
+					width,
+					height // destination (canvas)
+				);
+
+				// context.drawImage(video, 0, capturedFrameCount * video.height, video.width, video.height);
 				capturedFrameCount++;
 				frameCallback(capturedFrameCount);