From cb6327dda66c80ec6102eaa1f3f4bd0735dd62d7 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Fri, 31 Oct 2025 11:32:42 +0900 Subject: [PATCH] wip --- locales/index.d.ts | 6 ++++- locales/ja-JP.yml | 3 ++- .../components/MkImageFrameEditorDialog.vue | 22 ++++++++++-------- .../frontend/src/pages/settings/drive.vue | 1 + .../src/utility/image-frame-renderer.ts | 23 ++++++++++++++----- 5 files changed, 37 insertions(+), 18 deletions(-) diff --git a/locales/index.d.ts b/locales/index.d.ts index 9e2ca030b0..7168abd5ca 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5614,6 +5614,10 @@ export interface Locale extends ILocale { * フレームの編集 */ "title": string; + /** + * 画像にフレームやメタデータを含んだラベルを追加して装飾できます。 + */ + "tip": string; /** * フチの幅 */ @@ -12360,7 +12364,7 @@ export interface Locale extends ILocale { "defaultPreset": string; "_watermarkEditor": { /** - * 画像にクレジット情報などのウォーターマークを追加することができます。 + * 画像にクレジット情報などのウォーターマークを追加できます。 */ "tip": string; /** diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 977b7d459e..c1da09f501 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1400,6 +1400,7 @@ frame: "フレーム" _imageFrameEditor: title: "フレームの編集" + tip: "画像にフレームやメタデータを含んだラベルを追加して装飾できます。" borderThickness: "フチの幅" labelThickness: "ラベルの幅" labelScale: "ラベルのスケール" @@ -3310,7 +3311,7 @@ _userLists: watermark: "ウォーターマーク" defaultPreset: "デフォルトのプリセット" _watermarkEditor: - tip: "画像にクレジット情報などのウォーターマークを追加することができます。" + tip: "画像にクレジット情報などのウォーターマークを追加できます。" quitWithoutSaveConfirm: "保存せずに終了しますか？" driveFileTypeWarn: "このファイルは対応していません" driveFileTypeWarnDescription: "画像ファイルを選択してください" diff --git a/packages/frontend/src/components/MkImageFrameEditorDialog.vue b/packages/frontend/src/components/MkImageFrameEditorDialog.vue index fb587e7479..0e8fc011dc 100644 --- a/packages/frontend/src/components/MkImageFrameEditorDialog.vue +++ b/packages/frontend/src/components/MkImageFrameEditorDialog.vue @@ -62,12 +62,12 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts._imageFrameEditor.availableVariables }}:
{date} - 撮影日時
-
{model} - カメラモデル
-
{lensModel} - レンズモデル
-
{mm} - 焦点距離 (例: 50)
-
{f} - 絞り値 (例: 1.8)
-
{s} - シャッタースピード (例: 1/125)
-
{iso} - ISO感度 (例: 100)
+
{camera_model} - カメラモデル
+
{camera_lens_model} - レンズモデル
+
{camera_mm} - 焦点距離 (例: 50)
+
{camera_f} - 絞り値 (例: 1.8)
+
{camera_s} - シャッタースピード (例: 1/125)
+
{camera_iso} - ISO感度 (例: 100)
 @@ -102,7 +102,7 @@ import { useMkSelect } from '@/composables/use-mkselect.js'; const $i = ensureSignin(); const EXIF_MOCK = { - DateTimeOriginal: { description: '2025:01:01 12:00:00' }, + DateTimeOriginal: { description: '2012:03:04 5:06:07' }, Model: { description: 'Example camera' }, LensModel: { description: 'Example lens 123mm f/1.23' }, FocalLength: { description: '123mm' }, @@ -120,10 +120,12 @@ const frame = reactive(deepClone(props.frame) ?? { borderThickness: 0.05, labelThickness: 0.2, labelScale: 1.0, - title: 'Untitled by @syuilo', - text: '{mm}mm f/{f} {s}s ISO{iso}', + title: '{year}/{0month}/{0day}', + text: '{camera_mm}mm f/{camera_f} {camera_s}s ISO{camera_iso}', centered: false, withQrCode: true, + bgColor: [255, 255, 255], + fgColor: [0, 0, 0], }); const emit = defineEmits<{ @@ -138,7 +140,7 @@ async function cancel() { dialog.value?.close(); } -const updateThrottled = throttle(100, () => { +const updateThrottled = throttle(50, () => { if (renderer != null) { renderer.updateAndRender(frame); } diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue index 8cbad614da..d3e5558d07 100644 --- a/packages/frontend/src/pages/settings/drive.vue +++ b/packages/frontend/src/pages/settings/drive.vue @@ -128,6 +128,7 @@ SPDX-License-Identifier: AGPL-3.0-only +
diff --git a/packages/frontend/src/utility/image-frame-renderer.ts b/packages/frontend/src/utility/image-frame-renderer.ts index 8d01b84cd1..afae57bfb4 100644 --- a/packages/frontend/src/utility/image-frame-renderer.ts +++ b/packages/frontend/src/utility/image-frame-renderer.ts @@ -62,12 +62,23 @@ export class ImageFrameRenderer { const date = meta_date.split(' ')[0].replaceAll(':', '/'); switch (key) { case 'date': return date; - case 'model': return this.exif.Model ? this.exif.Model.description : '-'; - case 'lensModel': return this.exif.LensModel ? this.exif.LensModel.description : '-'; - case 'mm': return this.exif.FocalLength ? this.exif.FocalLength.description.replace(' mm', '').replace('mm', '') : '-'; - case 'f': return this.exif.FNumber ? this.exif.FNumber.description.replace('f/', '') : '-'; - case 's': return this.exif.ExposureTime ? this.exif.ExposureTime.description : '-'; - case 'iso': return this.exif.ISOSpeedRatings ? this.exif.ISOSpeedRatings.description : '-'; + case 'year': return date.split('/')[0]; + case 'month': return date.split('/')[1].replace(/^0/, ''); + case 'day': return date.split('/')[2].replace(/^0/, ''); + case 'hour': return meta_date.split(' ')[1].split(':')[0].replace(/^0/, ''); + case 'minute': return meta_date.split(' ')[1].split(':')[1].replace(/^0/, ''); + case 'second': return meta_date.split(' ')[1].split(':')[2].replace(/^0/, ''); + case '0month': return date.split('/')[1]; + case '0day': return date.split('/')[2]; + case '0hour': return meta_date.split(' ')[1].split(':')[0]; + case '0minute': return meta_date.split(' ')[1].split(':')[1]; + case '0second': return meta_date.split(' ')[1].split(':')[2]; + case 'camera_model': return this.exif.Model ? this.exif.Model.description : '-'; + case 'camera_lens_model': return this.exif.LensModel ? this.exif.LensModel.description : '-'; + case 'camera_mm': return this.exif.FocalLength ? this.exif.FocalLength.description.replace(' mm', '').replace('mm', '') : '-'; + case 'camera_f': return this.exif.FNumber ? this.exif.FNumber.description.replace('f/', '') : '-'; + case 'camera_s': return this.exif.ExposureTime ? this.exif.ExposureTime.description : '-'; + case 'camera_iso': return this.exif.ISOSpeedRatings ? this.exif.ISOSpeedRatings.description : '-'; default: return '-'; } });