feat(frontend): ドライブアップロード時に画像にウォーターマークを適用する機能

locales/index.d.ts

@@ -1902,6 +1902,18 @@ export interface Locale extends ILocale {
      * 既定アップロード先
      */
     "uploadFolder": string;
+    /**
+     * ウォーターマーク
+     */
+    "watermark": string;
+    /**
+     * ウォーターマークをつける
+     */
+    "useWatermark": string;
+    /**
+     * 画像にウォーターマークを追加します
+     */
+    "useWatermarkDescription": string;
     /**
      * すべての通知を既読にする
      */
@@ -3143,13 +3155,25 @@ export interface Locale extends ILocale {
      */
     "duplicate": string;
     /**
-     * 左
+     * 上
      */
-    "left": string;
+    "top": string;
+    /**
+     * 下
+     */
+    "bottom": string;
     /**
      * 中央
      */
     "center": string;
+    /**
+     * 左
+     */
+    "left": string;
+    /**
+     * 右
+     */
+    "right": string;
     /**
      * 広い
      */
@@ -4458,18 +4482,38 @@ export interface Locale extends ILocale {
      * 通知の表示
      */
     "notificationDisplay": string;
+    /**
+     * 配置
+     */
+    "placement": string;
     /**
      * 左上
      */
     "leftTop": string;
+    /**
+     * 中上
+     */
+    "centerTop": string;
     /**
      * 右上
      */
     "rightTop": string;
+    /**
+     * 左中
+     */
+    "leftCenter": string;
+    /**
+     * 右中
+     */
+    "rightCenter": string;
     /**
      * 左下
      */
     "leftBottom": string;
+    /**
+     * 中下
+     */
+    "centerBottom": string;
     /**
      * 右下
      */
@@ -4490,6 +4534,22 @@ export interface Locale extends ILocale {
      * 位置
      */
     "position": string;
+    /**
+     * 繰り返し
+     */
+    "repeat": string;
+    /**
+     * 引き伸ばし
+     */
+    "enlargement": string;
+    /**
+     * 回転
+     */
+    "rotate": string;
+    /**
+     * 透明度
+     */
+    "opacity": string;
     /**
      * サーバールール
      */
@@ -10601,6 +10661,44 @@ export interface Locale extends ILocale {
          */
         "sent": string;
     };
+    "_watermarkEditor": {
+        /**
+         * このファイルは対応していません
+         */
+        "driveFileTypeWarn": string;
+        /**
+         * 画像ファイルを選択してください
+         */
+        "driveFileTypeWarnDescription": string;
+        /**
+         * 設定が不十分です
+         */
+        "settingInvalidWarn": string;
+        /**
+         * プレビューが正常に表示されることを確認してから保存してください
+         */
+        "settingInvalidWarnDescription": string;
+        /**
+         * 描画モード
+         */
+        "repeatSetting": string;
+        /**
+         * 全体を埋め尽くす
+         */
+        "repeat": string;
+        /**
+         * 余白
+         */
+        "padding": string;
+        /**
+         * 回転した分の面積を確保する
+         */
+        "preserveBoundingRect": string;
+        /**
+         * 通常はオンで問題ありません。ウォーターマークを回転させた際に余白が不自然になった場合はオフにしてみてください。
+         */
+        "preserveBoundingRectDescription": string;
+    };
 }
 declare const locales: {
     [lang: string]: Locale;

locales/ja-JP.yml

@@ -471,6 +471,9 @@ share: "共有"
 notFound: "見つかりません"
 notFoundDescription: "指定されたURLに該当するページはありませんでした。"
 uploadFolder: "既定アップロード先"
+watermark: "ウォーターマーク"
+useWatermark: "ウォーターマークをつける"
+useWatermarkDescription: "画像にウォーターマークを追加します"
 markAsReadAllNotifications: "すべての通知を既読にする"
 markAsReadAllUnreadNotes: "すべての投稿を既読にする"
 markAsReadAllTalkMessages: "すべてのチャットを既読にする"
@@ -781,8 +784,11 @@ makeExplorable: "アカウントを見つけやすくする"
 makeExplorableDescription: "オフにすると、「みつける」にアカウントが載らなくなります。"
 showGapBetweenNotesInTimeline: "タイムラインのノートを離して表示"
 duplicate: "複製"
-left: "左"
+top: "上"
+bottom: "下"
 center: "中央"
+left: "左"
+right: "右"
 wide: "広い"
 narrow: "狭い"
 reloadToApplySetting: "設定はページリロード後に反映されます。"
@@ -1110,14 +1116,23 @@ editMemo: "メモを編集"
 reactionsList: "リアクション一覧"
 renotesList: "リノート一覧"
 notificationDisplay: "通知の表示"
+placement: "配置"
 leftTop: "左上"
+centerTop: "中上"
 rightTop: "右上"
+leftCenter: "左中"
+rightCenter: "右中"
 leftBottom: "左下"
+centerBottom: "中下"
 rightBottom: "右下"
 stackAxis: "スタック方向"
 vertical: "縦"
 horizontal: "横"
 position: "位置"
+repeat: "繰り返し"
+enlargement: "引き伸ばし"
+rotate: "回転"
+opacity: "透明度"
 serverRules: "サーバールール"
 pleaseConfirmBelowBeforeSignup: "このサーバーに登録するには、以下の内容を確認し同意する必要があります。"
 pleaseAgreeAllToContinue: "続けるには、全ての「同意する」にチェックが入っている必要があります。"
@@ -2826,3 +2841,14 @@ _selfXssPrevention:
 _followRequest:
   recieved: "受け取った申請"
   sent: "送った申請"
+
+_watermarkEditor:
+  driveFileTypeWarn: "このファイルは対応していません"
+  driveFileTypeWarnDescription: "画像ファイルを選択してください"
+  settingInvalidWarn: "設定が不十分です"
+  settingInvalidWarnDescription: "プレビューが正常に表示されることを確認してから保存してください"
+  repeatSetting: "描画モード"
+  repeat: "全体を埋め尽くす"
+  padding: "余白"
+  preserveBoundingRect: "回転した分の面積を確保する"
+  preserveBoundingRectDescription: "通常はオンで問題ありません。ウォーターマークを回転させた際に余白が不自然になった場合はオフにしてみてください。"

packages/frontend/src/components/MkDrive.vue

@@ -106,6 +106,7 @@ import XFile from '@/components/MkDrive.file.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useStream } from '@/stream.js';
+import { $i } from '@/account.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { uploadFile, uploads } from '@/scripts/upload.js';
@@ -143,6 +144,7 @@ const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const uploadings = uploads;
 const connection = useStream().useChannel('drive');
 const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
+const useWatermark = ref<boolean>(defaultStore.state.useWatermark);
 
 // ドロップされようとしているか
 const draghover = ref(false);
@@ -391,7 +393,7 @@ function onChangeFileInput() {
 }
 
 function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null) {
-	uploadFile(file, (folderToUpload && typeof folderToUpload === 'object') ? folderToUpload.id : null, undefined, keepOriginal.value).then(res => {
+	uploadFile(file, (folderToUpload && typeof folderToUpload === 'object') ? folderToUpload.id : null, undefined, keepOriginal.value, useWatermark.value).then(res => {
 		addFile(res, true);
 	});
 }
@@ -633,6 +635,10 @@ function getMenu() {
 		type: 'switch',
 		text: i18n.ts.keepOriginalUploading,
 		ref: keepOriginal,
+	}, {
+		type: 'switch',
+		text: i18n.ts.useWatermark,
+		ref: useWatermark,
 	}, { type: 'divider' }, {
 		text: i18n.ts.addFile,
 		type: 'label',

packages/frontend/src/components/MkInput.vue

@@ -27,8 +27,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:list="id"
 			:min="min"
 			:max="max"
-			@focus="focused = true"
-			@blur="focused = false"
+			@focus="onFocus"
+			@blur="onBlur"
 			@keydown="onKeydown($event)"
 			@input="onInput"
 		>
@@ -80,6 +80,8 @@ const emit = defineEmits<{
 	(ev: 'change', _ev: KeyboardEvent): void;
 	(ev: 'keydown', _ev: KeyboardEvent): void;
 	(ev: 'enter', _ev: KeyboardEvent): void;
+	(ev: 'focus', _ev: FocusEvent): void;
+	(ev: 'blur', _ev: FocusEvent): void;
 	(ev: 'update:modelValue', value: string | number): void;
 }>();
 
@@ -114,6 +116,14 @@ const onKeydown = (ev: KeyboardEvent) => {
 		emit('enter', ev);
 	}
 };
+const onFocus = (ev: FocusEvent) => {
+	focused.value = true;
+	emit('focus', ev);
+};
+const onBlur = (ev: FocusEvent) => {
+	focused.value = false;
+	emit('blur', ev);
+};
 
 const updated = () => {
 	changed.value = false;

packages/frontend/src/components/MkPostForm.vue

@@ -116,7 +116,7 @@ import { formatTimeString } from '@/scripts/format-time-string.js';
 import { Autocomplete } from '@/scripts/autocomplete.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
-import { selectFiles } from '@/scripts/select-file.js';
+import { selectFile } from '@/scripts/select-file.js';
 import { defaultStore, notePostInterruptors, postFormActions } from '@/store.js';
 import MkInfo from '@/components/MkInfo.vue';
 import { i18n } from '@/i18n.js';
@@ -413,7 +413,10 @@ function focus() {
 function chooseFileFrom(ev) {
 	if (props.mock) return;
 
-	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(files_ => {
+	selectFile(ev.currentTarget ?? ev.target, {
+		label: i18n.ts.attachFile,
+		multiple: true,
+	}).then(files_ => {
 		for (const file of files_) {
 			files.value.push(file);
 		}

packages/frontend/src/components/MkUserSetupDialog.Profile.vue

@@ -68,7 +68,9 @@ watch(description, () => {
 });
 
 function setAvatar(ev) {
-	chooseFileFromPc(false).then(async (files) => {
+	chooseFileFromPc({
+		multiple: false,
+	}).then(async (files) => {
 		const file = files[0];
 
 		let originalOrCropped = file;