fix: FocalLength, Aperture is weird when use crop sensor camera bug (#…

…161)
yurucam · Apr 15, 2024 · 50edca5 · 50edca5
2 parents 6cc9c03 + ee844d9
commit 50edca5
Show file tree

Hide file tree

Showing 14 changed files with 86 additions and 8 deletions.
diff --git a/web/package.json b/web/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.4.13",
+  "version": "0.4.14",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/web/src/core/exif-metadata/exif-metadata.ts b/web/src/core/exif-metadata/exif-metadata.ts
@@ -5,6 +5,7 @@ class ExifMetadata {
   public model: string | undefined;
   public lensModel: string | undefined;
   public focalLength: string | undefined;
+  public focalLengthIn35mm: string | undefined;
   public fNumber: string | undefined;
   public iso: string | undefined;
   public exposureTime: string | undefined;
@@ -16,6 +17,7 @@ class ExifMetadata {
     this.model = metadata?.Model?.description;
     this.lensModel = this.model ? metadata?.LensModel?.description?.replace(this.model, '')?.trim() : metadata?.LensModel?.description;
     this.focalLength = metadata?.FocalLength?.description?.replace(' mm', 'mm');
+    this.focalLengthIn35mm = `${metadata?.FocalLengthIn35mmFilm?.value}mm`;
     this.fNumber = metadata?.FNumber?.description;
     this.iso = metadata?.ISOSpeedRatings?.value?.toString();
     this.exposureTime = metadata?.ExposureTime?.description;

diff --git a/web/src/core/photo.ts b/web/src/core/photo.ts
@@ -97,6 +97,22 @@ class Photo {
     this.metadata.focalLength = value;
   }
 
+  /**
+   * Returns the focal length in 35mm of the camera that took the photo.
+   * @example '24mm'
+   */
+  public get focalLengthIn35mm(): string | undefined {
+    return this.metadata.focalLengthIn35mm;
+  }
+
+  /**
+   * Sets the focal length in 35mm of the camera that took the photo.
+   * @example '24mm'
+   */
+  public set focalLengthIn35mm(value: string | undefined) {
+    this.metadata.focalLengthIn35mm = value;
+  }
+
   /**
    * Returns the F number of the camera that took the photo.
    * @example 'f/4'

diff --git a/web/src/locales/translations/en.json b/web/src/locales/translations/en.json
@@ -45,6 +45,7 @@
   "root.settings.export-to-jpeg": "Export to JPEG",
   "root.settings.quality": "Quality",
   "root.settings.fix-image-width": "Fix Image Width",
+  "root.settings.focal-length-35mm-mode": "Focal Length 35mm Mode",
   "root.settings.image-width": "Image Width (px)",
   "root.settings.fix-watermark": "Add Watermark",
   "root.settings.watermark": "Watermark",

diff --git a/web/src/locales/translations/ja.json b/web/src/locales/translations/ja.json
@@ -45,6 +45,7 @@
   "root.settings.export-to-jpeg": "JPEGにエクスポート",
   "root.settings.quality": "画質",
   "root.settings.fix-image-width": "画像幅を固定",
+  "root.settings.focal-length-35mm-mode": "35mm換算焦点距離",
   "root.settings.image-width": "画像幅(px)",
   "root.settings.fix-watermark": "ウォーターマーク",
   "root.settings.watermark": "ウォーターマーク",

diff --git a/web/src/locales/translations/ko.json b/web/src/locales/translations/ko.json
@@ -46,6 +46,7 @@
   "root.settings.export-to-jpeg": "JPEG로 내보내기",
   "root.settings.quality": "품질",
   "root.settings.fix-image-width": "사진 너비 고정",
+  "root.settings.focal-length-35mm-mode": "35mm 환산 화각 표시",
   "root.settings.image-width": "사진 너비 (px)",
   "root.settings.fix-watermark": "워터마크 설정",
   "root.settings.watermark": "워터마크",

diff --git a/web/src/pages/root/components/focal-length-35mm-mode.tsx b/web/src/pages/root/components/focal-length-35mm-mode.tsx
@@ -0,0 +1,19 @@
+import { ListItem, Toggle } from 'konsta/react';
+import { useStore } from '../../../store';
+import { useTranslation } from 'react-i18next';
+import CameraIcon from '../../../icons/camera.icon';
+
+const FocalLength35mmModeListItem = () => {
+  const { t } = useTranslation();
+  const { focalLength35mmMode, setFocalLength35mmMode } = useStore();
+
+  return (
+    <ListItem
+      title={t('root.settings.focal-length-35mm-mode')}
+      media={<CameraIcon size={26} />}
+      after={<Toggle checked={focalLength35mmMode} onChange={() => setFocalLength35mmMode(!focalLength35mmMode)} />}
+    />
+  );
+};
+
+export default FocalLength35mmModeListItem;
diff --git a/web/src/pages/root/page.tsx b/web/src/pages/root/page.tsx
@@ -32,10 +32,11 @@ import CurrentVersionListItem from './components/current-version.list-item';
 import themes from '../../themes';
 import ThemeListItem from './components/theme.list-item';
 import ThemeOptionListInput from './components/theme-option.list-input';
+import FocalLength35mmModeListItem from './components/focal-length-35mm-mode';
 
 const RootPage = () => {
   const { t } = useTranslation();
-  const { photos, selectedThemeName, tabIndex, setTabIndex } = useStore();
+  const { focalLength35mmMode, photos, selectedThemeName, tabIndex, setTabIndex } = useStore();
   const theme = themes.find((theme) => theme.name === selectedThemeName);
 
   return (
@@ -68,7 +69,9 @@ const RootPage = () => {
                   />
                 }
                 title={photo.file.name}
-                subtitle={`${photo.focalLength} ${photo.fNumber} ISO${photo.iso} ${photo.exposureTime}s`}
+                subtitle={`${focalLength35mmMode ? photo.focalLengthIn35mm : photo.focalLength} ${photo.fNumber} ISO${photo.iso} ${
+                  photo.exposureTime
+                }s`}
                 text={`${photo.make} ${photo.model} ${photo.lensModel}`}
                 footer={
                   <div className="flex space-x-1 mt-1">
@@ -127,6 +130,7 @@ const RootPage = () => {
             <ExportToJpegListItem />
             <QualityListItem />
             <FixImageWidthListItem />
+            <FocalLength35mmModeListItem />
           </List>
 
           <List strongIos inset>

diff --git a/web/src/store.ts b/web/src/store.ts
@@ -71,6 +71,9 @@ type Store = {
 
   preview: Photo | null;
   setPreview: (preview: Photo | null) => void;
+
+  focalLength35mmMode: boolean;
+  setFocalLength35mmMode: (focalLength35mmMode: boolean) => void;
 };
 
 const useStore = create<Store>((set) => ({
@@ -204,6 +207,13 @@ const useStore = create<Store>((set) => ({
 
   preview: null,
   setPreview: (preview: Photo | null) => set({ preview }),
+
+  focalLength35mmMode: localStorage.getItem('focalLength35mmMode') === 'true',
+  setFocalLength35mmMode: (focalLength35mmMode: boolean) =>
+    set(() => {
+      localStorage.setItem('focalLength35mmMode', focalLength35mmMode.toString());
+      return { focalLength35mmMode };
+    }),
 }));
 
 // Set the theme on page load

diff --git a/web/src/themes/03_ONE_LINE/index.ts b/web/src/themes/03_ONE_LINE/index.ts
@@ -56,7 +56,7 @@ const ONE_LINE_FUNC: ThemeFunc = (photo: Photo, input: ThemeOptionInput, store:
       store.showCameraModel ? store.overrideCameraModel || photo.model : null,
       store.showLensModel ? store.overrideLensModel || photo.lensModel : null,
       `ISO ${photo.iso}`,
-      `${photo.focalLength}`,
+      `${store.focalLength35mmMode ? photo.focalLengthIn35mm : photo.focalLength}`,
       `${photo.fNumber}`,
       `${photo.exposureTime}s`,
     ]

diff --git a/web/src/themes/04_TWO_LINE/index.ts b/web/src/themes/04_TWO_LINE/index.ts
@@ -63,7 +63,14 @@ const TWO_LINE_FUNC: ThemeFunc = (photo: Photo, input: ThemeOptionInput, store:
     canvas.height - PADDING_BOTTOM / 2 - FONT_SIZE / 1.5
   );
   context.fillText(
-    [`ISO ${photo.iso}`, `${photo.focalLength}`, `${photo.fNumber}`, `${photo.exposureTime}s`].filter(Boolean).join(' | '),
+    [
+      `ISO ${photo.iso}`,
+      `${store.focalLength35mmMode ? photo.focalLengthIn35mm : photo.focalLength}`,
+      `${photo.fNumber}`,
+      `${photo.exposureTime}s`,
+    ]
+      .filter(Boolean)
+      .join(' | '),
     TEXT_ALIGN === 'left' ? PADDING_LEFT : TEXT_ALIGN === 'center' ? canvas.width / 2 : canvas.width - PADDING_RIGHT,
     canvas.height - PADDING_BOTTOM / 2 + FONT_SIZE / 1.5
   );

diff --git a/web/src/themes/05_SHOT_ON_ONE_LINE/index.ts b/web/src/themes/05_SHOT_ON_ONE_LINE/index.ts
@@ -22,7 +22,12 @@ const SHOT_ON_ONE_LINE_FUNC: ThemeFunc = (photo: Photo, input: ThemeOptionInput,
   context.font = `normal 100 ${FONT_SIZE}px Barlow`;
   context.textAlign = 'right';
   context.fillText(
-    [`ISO ${photo.iso}`, `${photo.focalLength}`, `${photo.fNumber}`, `${photo.exposureTime}s`]
+    [
+      `ISO ${photo.iso}`,
+      `${store.focalLength35mmMode ? photo.focalLengthIn35mm : photo.focalLength}`,
+      `${photo.fNumber}`,
+      `${photo.exposureTime}s`,
+    ]
       .filter(Boolean)
       .map((value) => value.trim())
       .join('  '),

diff --git a/web/src/themes/06_SHOT_ON_TWO_LINE/index.ts b/web/src/themes/06_SHOT_ON_TWO_LINE/index.ts
@@ -41,7 +41,14 @@ const SHOT_ON_TWO_LINE_FUNC: ThemeFunc = (photo: Photo, input: ThemeOptionInput,
   // ISO ${ISO} | ${F} ${FocalLength} | ${ShutterSpeed}s
   context.font = `normal 100 50px Barlow`;
   context.fillText(
-    [`ISO ${photo.iso}`, `${photo.focalLength}`, `${photo.fNumber}`, `${photo.exposureTime}s`].filter(Boolean).join('    '),
+    [
+      `ISO ${photo.iso}`,
+      `${store.focalLength35mmMode ? photo.focalLengthIn35mm : photo.focalLength}`,
+      `${photo.fNumber}`,
+      `${photo.exposureTime}s`,
+    ]
+      .filter(Boolean)
+      .join('    '),
     canvas.width / 2,
     canvas.height - 100
   );

diff --git a/web/src/themes/07_STRAP/index.ts b/web/src/themes/07_STRAP/index.ts
@@ -65,7 +65,12 @@ const STRAP_FUNC: ThemeFunc = (photo: Photo, input: ThemeOptionInput, store: Sto
   context.font = `normal 500 ${FONT_SIZE}px Barlow`;
   context.fillStyle = PRIMARY_TEXT_COLOR;
   context.fillText(
-    [`ISO ${photo.iso}`, `${photo.focalLength}`, `${photo.fNumber}`, `${photo.exposureTime}s`]
+    [
+      `ISO ${photo.iso}`,
+      `${store.focalLength35mmMode ? photo.focalLengthIn35mm : photo.focalLength}`,
+      `${photo.fNumber}`,
+      `${photo.exposureTime}s`,
+    ]
       .filter(Boolean)
       .map((value) => value.trim())
       .join('  '),