From cd9322a8243b12632db2dd9a29a702d7531a5aa0 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Tue, 3 Jun 2025 19:18:29 +0900 Subject: feat(frontend): 画像編集機能 (#16121) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * wip * wip * wip * wip * Update watermarker.ts * wip * wip * Update watermarker.ts * Update MkUploaderDialog.vue * wip * Update ImageEffector.ts * Update ImageEffector.ts * wip * wip * wip * wip * wip * wip * Update MkRange.vue * Update MkRange.vue * wip * wip * Update MkImageEffectorDialog.vue * Update MkImageEffectorDialog.Layer.vue * wip * Update zoomLines.ts * Update zoomLines.ts * wip * wip * Update ImageEffector.ts * wip * Update ImageEffector.ts * wip * Update ImageEffector.ts * swip * wip * Update ImageEffector.ts * wop * Update MkUploaderDialog.vue * Update ImageEffector.ts * wip * wip * wip * Update def.ts * Update def.ts * test * test * Update manager.ts * Update manager.ts * Update manager.ts * Update manager.ts * Update MkImageEffectorDialog.vue * wip * use WEBGL_lose_context * wip * Update MkUploaderDialog.vue * Update drive.vue * wip * Update MkUploaderDialog.vue * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip --- CHANGELOG.md | 1 + locales/index.d.ts | 178 ++++++++ locales/ja-JP.yml | 49 +++ packages/frontend/assets/sample/2-3.jpg | Bin 0 -> 306563 bytes packages/frontend/assets/sample/3-2.jpg | Bin 0 -> 419447 bytes .../src/components/MkImageEffectorDialog.Layer.vue | 78 ++++ .../src/components/MkImageEffectorDialog.vue | 302 +++++++++++++ .../frontend/src/components/MkPositionSelector.vue | 53 +++ packages/frontend/src/components/MkRange.vue | 68 ++- .../frontend/src/components/MkUploaderDialog.vue | 292 ++++++++++--- .../components/MkWatermarkEditorDialog.Layer.vue | 318 ++++++++++++++ .../src/components/MkWatermarkEditorDialog.vue | 455 ++++++++++++++++++++ .../src/pages/settings/drive.WatermarkItem.vue | 112 +++++ packages/frontend/src/pages/settings/drive.vue | 190 ++++++-- packages/frontend/src/preferences/def.ts | 28 ++ .../src/utility/image-effector/ImageEffector.ts | 476 +++++++++++++++++++++ .../frontend/src/utility/image-effector/fxs.ts | 37 ++ .../src/utility/image-effector/fxs/checker.ts | 87 ++++ .../image-effector/fxs/chromaticAberration.ts | 76 ++++ .../src/utility/image-effector/fxs/colorClamp.ts | 53 +++ .../image-effector/fxs/colorClampAdvanced.ts | 89 ++++ .../src/utility/image-effector/fxs/distort.ts | 71 +++ .../src/utility/image-effector/fxs/glitch.ts | 96 +++++ .../src/utility/image-effector/fxs/grayscale.ts | 37 ++ .../src/utility/image-effector/fxs/invert.ts | 53 +++ .../src/utility/image-effector/fxs/mirror.ts | 58 +++ .../src/utility/image-effector/fxs/polkadot.ts | 151 +++++++ .../src/utility/image-effector/fxs/stripe.ts | 98 +++++ .../src/utility/image-effector/fxs/threshold.ts | 62 +++ .../image-effector/fxs/watermarkPlacement.ts | 148 +++++++ .../src/utility/image-effector/fxs/zoomLines.ts | 97 +++++ packages/frontend/src/utility/snowfall-effect.ts | 2 +- packages/frontend/src/utility/watermark.ts | 180 ++++++++ 33 files changed, 3887 insertions(+), 108 deletions(-) create mode 100644 packages/frontend/assets/sample/2-3.jpg create mode 100644 packages/frontend/assets/sample/3-2.jpg create mode 100644 packages/frontend/src/components/MkImageEffectorDialog.Layer.vue create mode 100644 packages/frontend/src/components/MkImageEffectorDialog.vue create mode 100644 packages/frontend/src/components/MkPositionSelector.vue create mode 100644 packages/frontend/src/components/MkWatermarkEditorDialog.Layer.vue create mode 100644 packages/frontend/src/components/MkWatermarkEditorDialog.vue create mode 100644 packages/frontend/src/pages/settings/drive.WatermarkItem.vue create mode 100644 packages/frontend/src/utility/image-effector/ImageEffector.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/checker.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/colorClamp.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/distort.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/glitch.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/grayscale.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/invert.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/mirror.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/polkadot.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/stripe.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/threshold.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/zoomLines.ts create mode 100644 packages/frontend/src/utility/watermark.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index c91d602692..659aaae694 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - ### Client +- Feat: 画像にウォーターマークを付与できるようになりました - Enhance: ノートのリアクション一覧で、押せるリアクションを優先して表示できるようにするオプションを追加 - Fix: ドライブファイルの選択が不安定な問題を修正 - Fix: コントロールパネルのファイル欄などのデザインが崩れている問題を修正 diff --git a/locales/index.d.ts b/locales/index.d.ts index 0119b4ae5e..6f3d2b3853 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5481,6 +5481,14 @@ export interface Locale extends ILocale { * 全ての「ヒントとコツ」を非表示 */ "hideAllTips": string; + /** + * デフォルトの画像圧縮度 + */ + "defaultImageCompressionLevel": string; + /** + * 低くすると画質を保てますが、ファイルサイズは増加します。
高くするとファイルサイズを減らせますが、画質は低下します。 + */ + "defaultImageCompressionLevel_description": string; "_chat": { /** * まだメッセージはありません @@ -12024,6 +12032,176 @@ export interface Locale extends ILocale { */ "tip": string; }; + /** + * ウォーターマーク + */ + "watermark": string; + /** + * デフォルトのプリセット + */ + "defaultPreset": string; + "_watermarkEditor": { + /** + * 画像にクレジット情報などのウォーターマークを追加することができます。 + */ + "tip": string; + /** + * 保存せずに終了しますか？ + */ + "quitWithoutSaveConfirm": string; + /** + * ウォーターマークの編集 + */ + "title": string; + /** + * 全体に被せる + */ + "cover": string; + /** + * 敷き詰める + */ + "repeat": string; + /** + * 不透明度 + */ + "opacity": string; + /** + * サイズ + */ + "scale": string; + /** + * テキスト + */ + "text": string; + /** + * 位置 + */ + "position": string; + /** + * タイプ + */ + "type": string; + /** + * 画像 + */ + "image": string; + /** + * 高度 + */ + "advanced": string; + /** + * ストライプ + */ + "stripe": string; + /** + * ラインの幅 + */ + "stripeWidth": string; + /** + * ラインの数 + */ + "stripeFrequency": string; + /** + * 角度 + */ + "angle": string; + /** + * ポルカドット + */ + "polkadot": string; + /** + * チェッカー + */ + "checker": string; + /** + * メインドットの不透明度 + */ + "polkadotMainDotOpacity": string; + /** + * メインドットの大きさ + */ + "polkadotMainDotRadius": string; + /** + * サブドットの不透明度 + */ + "polkadotSubDotOpacity": string; + /** + * サブドットの大きさ + */ + "polkadotSubDotRadius": string; + /** + * サブドットの数 + */ + "polkadotSubDotDivisions": string; + }; + "_imageEffector": { + /** + * エフェクト + */ + "title": string; + /** + * エフェクトを追加 + */ + "addEffect": string; + /** + * 変更を破棄して終了しますか？ + */ + "discardChangesConfirm": string; + "_fxs": { + /** + * 色収差 + */ + "chromaticAberration": string; + /** + * グリッチ + */ + "glitch": string; + /** + * ミラー + */ + "mirror": string; + /** + * 色の反転 + */ + "invert": string; + /** + * 白黒 + */ + "grayscale": string; + /** + * 色の圧縮 + */ + "colorClamp": string; + /** + * 色の圧縮(高度) + */ + "colorClampAdvanced": string; + /** + * 歪み + */ + "distort": string; + /** + * 二値化 + */ + "threshold": string; + /** + * 集中線 + */ + "zoomLines": string; + /** + * ストライプ + */ + "stripe": string; + /** + * ポルカドット + */ + "polkadot": string; + /** + * チェッカー + */ + "checker": string; + }; + }; } declare const locales: { [lang: string]: Locale; diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index b61bbf4970..d4bd2c3116 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1365,6 +1365,8 @@ abort: "中止" tip: "ヒントとコツ" redisplayAllTips: "全ての「ヒントとコツ」を再表示" hideAllTips: "全ての「ヒントとコツ」を非表示" +defaultImageCompressionLevel: "デフォルトの画像圧縮度" +defaultImageCompressionLevel_description: "低くすると画質を保てますが、ファイルサイズは増加します。
高くするとファイルサイズを減らせますが、画質は低下します。" _chat: noMessagesYet: "まだメッセージはありません" @@ -3219,3 +3221,50 @@ _clip: _userLists: tip: "任意のユーザーが含まれるリストを作成できます。作成したリストはタイムラインとして表示可能です。" + +watermark: "ウォーターマーク" +defaultPreset: "デフォルトのプリセット" +_watermarkEditor: + tip: "画像にクレジット情報などのウォーターマークを追加することができます。" + quitWithoutSaveConfirm: "保存せずに終了しますか？" + title: "ウォーターマークの編集" + cover: "全体に被せる" + repeat: "敷き詰める" + opacity: "不透明度" + scale: "サイズ" + text: "テキスト" + position: "位置" + type: "タイプ" + image: "画像" + advanced: "高度" + stripe: "ストライプ" + stripeWidth: "ラインの幅" + stripeFrequency: "ラインの数" + angle: "角度" + polkadot: "ポルカドット" + checker: "チェッカー" + polkadotMainDotOpacity: "メインドットの不透明度" + polkadotMainDotRadius: "メインドットの大きさ" + polkadotSubDotOpacity: "サブドットの不透明度" + polkadotSubDotRadius: "サブドットの大きさ" + polkadotSubDotDivisions: "サブドットの数" + +_imageEffector: + title: "エフェクト" + addEffect: "エフェクトを追加" + discardChangesConfirm: "変更を破棄して終了しますか？" + + _fxs: + chromaticAberration: "色収差" + glitch: "グリッチ" + mirror: "ミラー" + invert: "色の反転" + grayscale: "白黒" + colorClamp: "色の圧縮" + colorClampAdvanced: "色の圧縮(高度)" + distort: "歪み" + threshold: "二値化" + zoomLines: "集中線" + stripe: "ストライプ" + polkadot: "ポルカドット" + checker: "チェッカー" diff --git a/packages/frontend/assets/sample/2-3.jpg b/packages/frontend/assets/sample/2-3.jpg new file mode 100644 index 0000000000..ee9bff6527 Binary files /dev/null and b/packages/frontend/assets/sample/2-3.jpg differ diff --git a/packages/frontend/assets/sample/3-2.jpg b/packages/frontend/assets/sample/3-2.jpg new file mode 100644 index 0000000000..400de1649d Binary files /dev/null and b/packages/frontend/assets/sample/3-2.jpg differ diff --git a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue new file mode 100644 index 0000000000..0312017d86 --- /dev/null +++ b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue @@ -0,0 +1,78 @@ + + + + + + + diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue new file mode 100644 index 0000000000..997dd4d528 --- /dev/null +++ b/packages/frontend/src/components/MkImageEffectorDialog.vue @@ -0,0 +1,302 @@ + + + + + + + diff --git a/packages/frontend/src/components/MkPositionSelector.vue b/packages/frontend/src/components/MkPositionSelector.vue new file mode 100644 index 0000000000..002950cdf1 --- /dev/null +++ b/packages/frontend/src/components/MkPositionSelector.vue @@ -0,0 +1,53 @@ + + + + + + + diff --git a/packages/frontend/src/components/MkRange.vue b/packages/frontend/src/components/MkRange.vue index f36e68b687..9a6a207c74 100644 --- a/packages/frontend/src/components/MkRange.vue +++ b/packages/frontend/src/components/MkRange.vue @@ -12,7 +12,12 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+
+
+
+
+
+
@@ -24,7 +29,9 @@ SPDX-License-Identifier: AGPL-3.0-only @mouseenter.passive="onMouseenter" @mousedown="onMousedown" @touchstart="onMousedown" - >
+ > +
+
@@ -63,6 +70,9 @@ const emit = defineEmits<{ const containerEl = useTemplateRef('containerEl'); const thumbEl = useTemplateRef('thumbEl'); +const maxRatio = computed(() => Math.abs(props.max) / (props.max + Math.abs(Math.min(0, props.min)))); +const minRatio = computed(() => Math.abs(Math.min(0, props.min)) / (props.max + Math.abs(Math.min(0, props.min)))); + const rawValue = ref((props.modelValue - props.min) / (props.max - props.min)); const steppedRawValue = computed(() => { if (props.step) { @@ -222,15 +232,17 @@ function onMousedown(ev: MouseEvent | TouchEvent) { } } - $thumbHeight: 20px; - $thumbWidth: 20px; + $thumbHeight: 32px; + $thumbWidth: 32px; + $thumbInnerHeight: 19px; + $thumbInnerWidth: 19px; > .body { display: flex; align-items: center; justify-content: center; gap: 8px; - padding: 7px 12px; + padding: 0px 4px; background: var(--MI_THEME-panel); border: solid 1px var(--MI_THEME-panel); border-radius: 6px; @@ -256,10 +268,30 @@ function onMousedown(ev: MouseEvent | TouchEvent) { > .highlight { position: absolute; top: 0; - left: 0; height: 100%; - background: var(--MI_THEME-accent); - opacity: 0.5; + background: color(from var(--MI_THEME-buttonGradateA) srgb r g b / 0.5); + overflow: clip; + + > .shine { + position: absolute; + top: 0; + width: 64px; + height: 100%; + } + } + + > .highlight.right { + > .shine.right { + right: calc(#{$thumbInnerWidth} / 2); + background: linear-gradient(-90deg, var(--MI_THEME-buttonGradateB), color(from var(--MI_THEME-buttonGradateA) srgb r g b / 0)); + } + } + + > .highlight.left { + > .shine.left { + left: calc(#{$thumbInnerWidth} / 2); + background: linear-gradient(90deg, var(--MI_THEME-buttonGradateB), color(from var(--MI_THEME-buttonGradateA) srgb r g b / 0)); + } } } @@ -290,11 +322,25 @@ function onMousedown(ev: MouseEvent | TouchEvent) { width: $thumbWidth; height: $thumbHeight; cursor: grab; - background: var(--MI_THEME-accent); - border-radius: 999px; &:hover { - background: hsl(from var(--MI_THEME-accent) h s calc(l + 10)); + > .thumbInner { + background: hsl(from var(--MI_THEME-accent) h s calc(l + 10)); + } + } + + > .thumbInner { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + width: $thumbInnerWidth; + height: $thumbInnerHeight; + background: var(--MI_THEME-accent); + border-radius: 999px; + pointer-events: none; } } } diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue index a0d25d08d3..b2e4896ed3 100644 --- a/packages/frontend/src/components/MkUploaderDialog.vue +++ b/packages/frontend/src/components/MkUploaderDialog.vue @@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only v-for="ctx in items" :key="ctx.id" v-panel - :class="[$style.item, ctx.waiting ? $style.itemWaiting : null, ctx.uploaded ? $style.itemCompleted : null, ctx.uploadFailed ? $style.itemFailed : null]" + :class="[$style.item, ctx.preprocessing ? $style.itemWaiting : null, ctx.uploaded ? $style.itemCompleted : null, ctx.uploadFailed ? $style.itemFailed : null]" :style="{ '--p': ctx.progress != null ? `${ctx.progress.value / ctx.progress.max * 100}%` : '0%' }" >
@@ -40,8 +40,8 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ ctx.name }}
{{ ctx.file.type }} - {{ bytes(ctx.file.size) }} ({{ i18n.tsx._uploader.compressedToX({ x: bytes(ctx.compressedSize) }) }} = {{ i18n.tsx._uploader.savedXPercent({ x: Math.round((1 - ctx.compressedSize / ctx.file.size) * 100) }) }}) + {{ bytes(ctx.file.size) }}
@@ -59,19 +59,6 @@ SPDX-License-Identifier: AGPL-3.0-only
- - - -
{{ i18n.tsx._uploader.maxFileSizeIsX({ x: $i.policies.maxFileSizeMb + 'MB' }) }}
@@ -93,7 +80,7 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.vue new file mode 100644 index 0000000000..4cfb4a72bc --- /dev/null +++ b/packages/frontend/src/components/MkWatermarkEditorDialog.vue @@ -0,0 +1,455 @@ + + + + + + + diff --git a/packages/frontend/src/pages/settings/drive.WatermarkItem.vue b/packages/frontend/src/pages/settings/drive.WatermarkItem.vue new file mode 100644 index 0000000000..b466f35fc5 --- /dev/null +++ b/packages/frontend/src/pages/settings/drive.WatermarkItem.vue @@ -0,0 +1,112 @@ + + + + + + + diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue index d62e487341..0614b1242b 100644 --- a/packages/frontend/src/pages/settings/drive.vue +++ b/packages/frontend/src/pages/settings/drive.vue @@ -39,53 +39,122 @@ SPDX-License-Identifier: AGPL-3.0-only - -
- - - {{ i18n.ts.uploadFolder }} - - + + + + +
+ + + {{ i18n.ts.uploadFolder }} + + + + + + + {{ i18n.ts.drivecleaner }} - - - {{ i18n.ts.drivecleaner }} - + + + + + + + + + + + + + + - - - - - + + + + - - - - - - - - - - - - - - - -
- + +
+ + + + + + + +
+ + + + + + +
+
+ + + + + + + + + +
+ +
+ + + + + + + + +
+ + + + + + + + + + + +
+ +