feat: Add fix major axis length (#38)

web/src/components/FixMajorAxisLengthInput.tsx

@@ -0,0 +1,29 @@
+import { ListInput } from 'konsta/react';
+import { useEffect, useState } from 'react';
+
+if (localStorage.getItem('fixMajorAxisLength') === null) {
+	localStorage.setItem('fixMajorAxisLength', '0');
+}
+
+const FixMajorAxisLengthInput = () => {
+	const [fixMajorAxisLength, setFixMajorAxisLength] = useState(Number(localStorage.getItem('fixMajorAxisLength')));
+
+	useEffect(() => {
+		localStorage.setItem('fixMajorAxisLength', fixMajorAxisLength.toString());
+	}, [fixMajorAxisLength]);
+
+	return (
+		<ListInput
+			label
+			title="Fix Major Axis Length (px, 0 to disable)"
+			type="number"
+			placeholder="e.g. 1920"
+			value={fixMajorAxisLength}
+			onChange={(e) => {
+				setFixMajorAxisLength(e.target.value);
+			}}
+		/>
+	);
+};
+
+export default FixMajorAxisLengthInput;

web/src/domain/photo.ts

@@ -31,8 +31,14 @@ class Photo {
 
 	public toBlob(): Promise<Blob> {
 		const isWebp = localStorage.getItem('exportToWebp') === 'yes';
+		const fixMajorAxisLength = Number(localStorage.getItem('fixMajorAxisLength'));
+		const tempCanvas = document.createElement('canvas');
+		tempCanvas.width = fixMajorAxisLength || this.image.width;
+		tempCanvas.height = (this.image.height / this.image.width) * tempCanvas.width;
+		const tempContext = tempCanvas.getContext('2d')!;
+		tempContext.drawImage(this.image, 0, 0, tempCanvas.width, tempCanvas.height);
 		return new Promise<Blob>((resolve) => {
-			this._canvas.toBlob(
+			tempCanvas.toBlob(
 				(blob) => {
 					resolve(blob!);
 				},
@@ -44,7 +50,13 @@ class Photo {
 
 	public toDataURL(): string {
 		const isWebp = localStorage.getItem('exportToWebp') === 'yes';
-		return this._canvas.toDataURL(isWebp ? 'image/webp' : 'image/jpeg', Number(localStorage.getItem('quality')) / 100);
+		const fixMajorAxisLength = Number(localStorage.getItem('fixMajorAxisLength'));
+		const tempCanvas = document.createElement('canvas');
+		tempCanvas.width = fixMajorAxisLength || this.image.width;
+		tempCanvas.height = (this.image.height / this.image.width) * tempCanvas.width;
+		const tempContext = tempCanvas.getContext('2d')!;
+		tempContext.drawImage(this.image, 0, 0, tempCanvas.width, tempCanvas.height);
+		return tempCanvas.toDataURL(isWebp ? 'image/webp' : 'image/jpeg', Number(localStorage.getItem('quality')) / 100);
 	}
 
 	public toMetadata() {

web/src/pages/SettingPage.tsx

@@ -8,6 +8,7 @@ import OverrideCameraMakerInput from '../components/OverrideCameraMakerInput';
 import OverrideCameraModelInput from '../components/OverrideCameraModelInput';
 import OverrideLensModelInput from '../components/OverrideLensModelInput';
 import QualityRangeSlider from '../components/QualityRangeSlider';
+import FixMajorAxisLengthInput from '../components/FixMajorAxisLengthInput';
 
 const SettingPage = () => {
 	return (
@@ -21,6 +22,7 @@ const SettingPage = () => {
 			<List strong inset>
 				<ListItem label title="Export to Webp" after={<ExportToWebpToggle />} />
 				<QualityRangeSlider />
+				<FixMajorAxisLengthInput />
 			</List>
 
 			<BlockTitle>EXIF Metadata Visibility</BlockTitle>