feat(frontend): EXIFフレーム機能 (#16725)

* wip

* wip

* Update ImageEffector.ts

* Update image-label-renderer.ts

* Update image-label-renderer.ts

* wip

* Update image-label-renderer.ts

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update use-uploader.ts

* Update watermark.ts

* wip

* wu

* wip

* Update image-frame-renderer.ts

* wip

* wip

* Update image-frame-renderer.ts

* Create ImageCompositor.ts

* Update ImageCompositor.ts

* wip

* wip

* Update ImageEffector.ts

* wip

* Update use-uploader.ts

* wip

* wip

* wip

* wip

* Update fxs.ts

* wip

* wip

* wip

* Update CHANGELOG.md

* wip

* wip

* Update MkImageEffectorDialog.vue

* Update MkImageEffectorDialog.vue

* Update MkImageFrameEditorDialog.vue

* Update use-uploader.ts

* improve error handling

* Update use-uploader.ts

* 🎨

* wip

* wip

* lazy load

* lazy load

* wip

* wip

* wip

2 files changed, 223 insertions, 2 deletions

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 43e31c16a1..e4ebfedd3d 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -5625,6 +5625,172 @@ export interface Locale extends ILocale {
      * あなたは管理者です
      */
     "youAreAdmin": string;
+    /**
+     * フレーム
+     */
+    "frame": string;
+    /**
+     * プリセット
+     */
+    "presets": string;
+    /**
+     * ゼロ埋め
+     */
+    "zeroPadding": string;
+    "_imageEditing": {
+        "_vars": {
+            /**
+             * ファイルのキャプション
+             */
+            "caption": string;
+            /**
+             * ファイル名
+             */
+            "filename": string;
+            /**
+             * 拡張子無しファイル名
+             */
+            "filename_without_ext": string;
+            /**
+             * 撮影年
+             */
+            "year": string;
+            /**
+             * 撮影月
+             */
+            "month": string;
+            /**
+             * 撮影日
+             */
+            "day": string;
+            /**
+             * 撮影した時刻(時)
+             */
+            "hour": string;
+            /**
+             * 撮影した時刻(分)
+             */
+            "minute": string;
+            /**
+             * 撮影した時刻(秒)
+             */
+            "second": string;
+            /**
+             * カメラ名
+             */
+            "camera_model": string;
+            /**
+             * レンズ名
+             */
+            "camera_lens_model": string;
+            /**
+             * 焦点距離
+             */
+            "camera_mm": string;
+            /**
+             * 焦点距離(35mm判換算)
+             */
+            "camera_mm_35": string;
+            /**
+             * 絞り
+             */
+            "camera_f": string;
+            /**
+             * シャッタースピード
+             */
+            "camera_s": string;
+            /**
+             * ISO感度
+             */
+            "camera_iso": string;
+            /**
+             * 緯度
+             */
+            "gps_lat": string;
+            /**
+             * 経度
+             */
+            "gps_long": string;
+        };
+    };
+    "_imageFrameEditor": {
+        /**
+         * フレームの編集
+         */
+        "title": string;
+        /**
+         * 画像にフレームやメタデータを含んだラベルを追加して装飾できます。
+         */
+        "tip": string;
+        /**
+         * ヘッダー
+         */
+        "header": string;
+        /**
+         * フッター
+         */
+        "footer": string;
+        /**
+         * フチの幅
+         */
+        "borderThickness": string;
+        /**
+         * ラベルの幅
+         */
+        "labelThickness": string;
+        /**
+         * ラベルのスケール
+         */
+        "labelScale": string;
+        /**
+         * 中央揃え
+         */
+        "centered": string;
+        /**
+         * キャプション(大)
+         */
+        "captionMain": string;
+        /**
+         * キャプション(小)
+         */
+        "captionSub": string;
+        /**
+         * 利用可能な変数
+         */
+        "availableVariables": string;
+        /**
+         * 二次元コード
+         */
+        "withQrCode": string;
+        /**
+         * 背景色
+         */
+        "backgroundColor": string;
+        /**
+         * 文字色
+         */
+        "textColor": string;
+        /**
+         * フォント
+         */
+        "font": string;
+        /**
+         * セリフ
+         */
+        "fontSerif": string;
+        /**
+         * サンセリフ
+         */
+        "fontSansSerif": string;
+        /**
+         * 保存せずに終了しますか？
+         */
+        "quitWithoutSaveConfirm": string;
+        /**
+         * 画像の読み込みに失敗しました
+         */
+        "failedToLoadImage": string;
+    };
     "_compression": {
         "_quality": {
             /**
@@ -12354,7 +12520,7 @@ export interface Locale extends ILocale {
     "defaultPreset": string;
     "_watermarkEditor": {
         /**
-         * 画像にクレジット情報などのウォーターマークを追加することができます。
+         * 画像にクレジット情報などのウォーターマークを追加できます。
          */
         "tip": string;
         /**
@@ -12469,6 +12635,10 @@ export interface Locale extends ILocale {
          * 空欄にするとアカウントのURLになります
          */
         "leaveBlankToAccountUrl": string;
+        /**
+         * 画像の読み込みに失敗しました
+         */
+        "failedToLoadImage": string;
     };
     "_imageEffector": {
         /**
@@ -12487,6 +12657,10 @@ export interface Locale extends ILocale {
          * 設定項目はありません
          */
         "nothingToConfigure": string;
+        /**
+         * 画像の読み込みに失敗しました
+         */
+        "failedToLoadImage": string;
         "_fxs": {
             /**
              * 色収差
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 0e2ae63804..d0485af208 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1401,6 +1401,51 @@ widgets: "ウィジェット"
 deviceInfo: "デバイス情報"
 deviceInfoDescription: "技術的なお問い合わせの際に、以下の情報を併記すると問題の解決に役立つことがあります。"
 youAreAdmin: "あなたは管理者です"
+frame: "フレーム"
+presets: "プリセット"
+zeroPadding: "ゼロ埋め"
+
+_imageEditing:
+  _vars:
+    caption: "ファイルのキャプション"
+    filename: "ファイル名"
+    filename_without_ext: "拡張子無しファイル名"
+    year: "撮影年"
+    month: "撮影月"
+    day: "撮影日"
+    hour: "撮影した時刻(時)"
+    minute: "撮影した時刻(分)"
+    second: "撮影した時刻(秒)"
+    camera_model: "カメラ名"
+    camera_lens_model: "レンズ名"
+    camera_mm: "焦点距離"
+    camera_mm_35: "焦点距離(35mm判換算)"
+    camera_f: "絞り"
+    camera_s: "シャッタースピード"
+    camera_iso: "ISO感度"
+    gps_lat: "緯度"
+    gps_long: "経度"
+
+_imageFrameEditor:
+  title: "フレームの編集"
+  tip: "画像にフレームやメタデータを含んだラベルを追加して装飾できます。"
+  header: "ヘッダー"
+  footer: "フッター"
+  borderThickness: "フチの幅"
+  labelThickness: "ラベルの幅"
+  labelScale: "ラベルのスケール"
+  centered: "中央揃え"
+  captionMain: "キャプション(大)"
+  captionSub: "キャプション(小)"
+  availableVariables: "利用可能な変数"
+  withQrCode: "二次元コード"
+  backgroundColor: "背景色"
+  textColor: "文字色"
+  font: "フォント"
+  fontSerif: "セリフ"
+  fontSansSerif: "サンセリフ"
+  quitWithoutSaveConfirm: "保存せずに終了しますか？"
+  failedToLoadImage: "画像の読み込みに失敗しました"
 
 _compression:
   _quality:
@@ -3307,7 +3352,7 @@ _userLists:
 watermark: "ウォーターマーク"
 defaultPreset: "デフォルトのプリセット"
 _watermarkEditor:
-  tip: "画像にクレジット情報などのウォーターマークを追加することができます。"
+  tip: "画像にクレジット情報などのウォーターマークを追加できます。"
   quitWithoutSaveConfirm: "保存せずに終了しますか？"
   driveFileTypeWarn: "このファイルは対応していません"
   driveFileTypeWarnDescription: "画像ファイルを選択してください"
@@ -3336,12 +3381,14 @@ _watermarkEditor:
   polkadotSubDotRadius: "サブドットの大きさ"
   polkadotSubDotDivisions: "サブドットの数"
   leaveBlankToAccountUrl: "空欄にするとアカウントのURLになります"
+  failedToLoadImage: "画像の読み込みに失敗しました"
 
 _imageEffector:
   title: "エフェクト"
   addEffect: "エフェクトを追加"
   discardChangesConfirm: "変更を破棄して終了しますか？"
   nothingToConfigure: "設定項目はありません"
+  failedToLoadImage: "画像の読み込みに失敗しました"
 
   _fxs:
     chromaticAberration: "色収差"