fix: Change variable when calculating canvas size (#11)

yurucam · Mar 29, 2024 · c6803b1 · c6803b1
2 parents 6c8d8b1 + e1d94b9
commit c6803b1
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 30 deletions.
diff --git a/web/src/frames/cinemaScope.ts b/web/src/frames/cinemaScope.ts
@@ -8,8 +8,8 @@ export async function cinemaScope(photo: Photo) {
 		const image = new Image();
 		image.src = photo.url;
 		image.onload = async () => {
-			const trimmedImageWidth = photo.width;
-			const trimmedImageHeight = photo.width / 2.35;
+			const trimmedImageWidth = image.width;
+			const trimmedImageHeight = image.width / 2.35;
 
 			canvas.width = trimmedImageWidth;
 			canvas.height = trimmedImageHeight * 1.311875;
@@ -19,7 +19,7 @@ export async function cinemaScope(photo: Photo) {
 			context.drawImage(
 				image,
 				0,
-				(photo.height - trimmedImageHeight) / 2,
+				(image.height - trimmedImageHeight) / 2,
 				trimmedImageWidth,
 				trimmedImageHeight,
 				0,

diff --git a/web/src/frames/no-frame.ts b/web/src/frames/no-frame.ts
@@ -8,12 +8,12 @@ export async function noFrame(photo: Photo) {
 		const image = new Image();
 		image.src = photo.url;
 		image.onload = async () => {
-			canvas.width = photo.width;
-			canvas.height = photo.height;
+			canvas.width = image.width;
+			canvas.height = image.height;
 
 			context.fillStyle = '#ffffff';
 			context.fillRect(0, 0, canvas.width, canvas.height);
-			context.drawImage(image, 0, 0, photo.width, photo.height);
+			context.drawImage(image, 0, 0, image.width, image.height);
 
 			const data = canvas.toDataURL(localStorage.getItem('exportToWebp') === 'yes' ? 'image/webp' : 'image/jpeg');
 			const a = document.createElement('a');

diff --git a/web/src/frames/simple.ts b/web/src/frames/simple.ts
@@ -1,10 +1,10 @@
 import Photo from '../domain/photo';
 
-function calculateMargin(photo: Photo) {
+function calculateMargin(image: HTMLImageElement) {
 	return {
-		HORIZONTAL_MARGIN: photo.width * 0.025,
-		VERTICAL_MARGIN: photo.width * 0.025,
-		BOTTOM_MARGIN: photo.width > photo.height ? photo.height * 0.08 : photo.width * 0.08,
+		HORIZONTAL_MARGIN: image.width * 0.025,
+		VERTICAL_MARGIN: image.width * 0.025,
+		BOTTOM_MARGIN: image.width > image.height ? image.height * 0.08 : image.width * 0.08,
 	};
 }
 
@@ -16,17 +16,17 @@ export async function simpleFrame(photo: Photo) {
 		const image = new Image();
 		image.src = photo.url;
 		image.onload = async () => {
-			const { HORIZONTAL_MARGIN, VERTICAL_MARGIN, BOTTOM_MARGIN } = calculateMargin(photo);
+			const { HORIZONTAL_MARGIN, VERTICAL_MARGIN, BOTTOM_MARGIN } = calculateMargin(image);
 			const FONT_FAMILY = 'Roboto, sans-serif';
-			const FONT_SIZE = photo.width > photo.height ? photo.height * 0.0275 : photo.width * 0.02;
-			const LINE_SPACING = photo.width > photo.height ? photo.height * 0.005 : photo.width * 0.0045; // 行間
+			const FONT_SIZE = image.width > image.height ? image.height * 0.0275 : image.width * 0.02;
+			const LINE_SPACING = image.width > image.height ? image.height * 0.005 : image.width * 0.0045; // 行間
 
-			canvas.width = photo.width + HORIZONTAL_MARGIN * 2;
-			canvas.height = photo.height + VERTICAL_MARGIN * 2 + BOTTOM_MARGIN;
+			canvas.width = image.width + HORIZONTAL_MARGIN * 2;
+			canvas.height = image.height + VERTICAL_MARGIN * 2 + BOTTOM_MARGIN;
 
 			context.fillStyle = '#ffffff';
 			context.fillRect(0, 0, canvas.width, canvas.height);
-			context.drawImage(image, HORIZONTAL_MARGIN, VERTICAL_MARGIN, photo.width, photo.height);
+			context.drawImage(image, HORIZONTAL_MARGIN, VERTICAL_MARGIN, image.width, image.height);
 
 			const textVerticalCenter = canvas.height - (BOTTOM_MARGIN + VERTICAL_MARGIN * 2) / 2;
 			const upperTextHeight = textVerticalCenter - LINE_SPACING;

diff --git a/web/src/frames/square.ts b/web/src/frames/square.ts
@@ -1,17 +1,17 @@
 import Photo from '../domain/photo';
 
-function calculateMargin(photo: Photo) {
-	if (photo.width < photo.height) {
+function calculateMargin(image: HTMLImageElement) {
+	if (image.width < image.height) {
 		return {
-			HORIZONTAL_MARGIN: (photo.height + photo.height * 0.025 * 2 - photo.width) / 2,
-			VERTICAL_MARGIN: photo.width * 0.025,
-			BOTTOM_MARGIN: photo.height * 0.05,
+			HORIZONTAL_MARGIN: (image.height + image.height * 0.025 * 2 - image.width) / 2,
+			VERTICAL_MARGIN: image.width * 0.025,
+			BOTTOM_MARGIN: image.height * 0.05,
 		};
 	} else {
 		return {
-			HORIZONTAL_MARGIN: photo.width * 0.025,
-			VERTICAL_MARGIN: (photo.width + photo.width * 0.025 * 2 - photo.height) / 2,
-			BOTTOM_MARGIN: photo.width * 0.06,
+			HORIZONTAL_MARGIN: image.width * 0.025,
+			VERTICAL_MARGIN: (image.width + image.width * 0.025 * 2 - image.height) / 2,
+			BOTTOM_MARGIN: image.width * 0.06,
 		};
 	}
 }
@@ -24,17 +24,17 @@ export async function squareFrame(photo: Photo) {
 		const image = new Image();
 		image.src = photo.url;
 		image.onload = async () => {
-			const { HORIZONTAL_MARGIN, VERTICAL_MARGIN, BOTTOM_MARGIN } = calculateMargin(photo);
+			const { HORIZONTAL_MARGIN, VERTICAL_MARGIN, BOTTOM_MARGIN } = calculateMargin(image);
 			const FONT_FAMILY = 'Roboto, sans-serif';
-			const FONT_SIZE = photo.width > photo.height ? photo.height * 0.0275 : photo.width * 0.02;
-			const LINE_SPACING = photo.width > photo.height ? photo.height * 0.005 : photo.width * 0.0045; // 行間
+			const FONT_SIZE = image.width > image.height ? image.height * 0.0275 : image.width * 0.02;
+			const LINE_SPACING = image.width > image.height ? image.height * 0.005 : image.width * 0.0045; // 行間
 
-			canvas.width = photo.width + HORIZONTAL_MARGIN * 2;
-			canvas.height = photo.height + VERTICAL_MARGIN * 2 + BOTTOM_MARGIN;
+			canvas.width = image.width + HORIZONTAL_MARGIN * 2;
+			canvas.height = image.height + VERTICAL_MARGIN * 2 + BOTTOM_MARGIN;
 
 			context.fillStyle = '#ffffff';
 			context.fillRect(0, 0, canvas.width, canvas.height);
-			context.drawImage(image, HORIZONTAL_MARGIN, VERTICAL_MARGIN, photo.width, photo.height);
+			context.drawImage(image, HORIZONTAL_MARGIN, VERTICAL_MARGIN, image.width, image.height);
 
 			const textVerticalCenter = canvas.height - (BOTTOM_MARGIN + VERTICAL_MARGIN * 2) / 2;
 			const upperTextHeight = textVerticalCenter - LINE_SPACING;