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

[kakkokari-gtyih]

注目が集まっているので大きめに補足しておくと、この機能はそもそもAI学習の妨害の目的でウォーターマークを入れることを想定して設計したものではない（なんかの商品の店舗特典の画像の上に「SAMPLE」とかが載っているような、その筋での使い道を想定している）

What

ドライブに画像をアップロードする際に、前処理としてブラウザ内でウォーターマークをかけられるように

• デフォルトでかけるかどうか（デフォルトOFFの場合でもアップロードメニューで選択可能）
• クリップボードに貼り付けた際はデフォルトの値を使うか、毎回聞くか

の設定が可能

設定画面

パターンで出力する場合

ワンポイントで出力する場合

Why

Fix #12250

ref MisskeyIO#785

Additional info (optional)

• selectFileのオプションを引き数ではなくoptsオブジェクトでとるように
• selectFileとselectFilesを統合、overload functionにした

Checklist

• Read the contribution guide
• Test working in a local environment
• (If needed) Add story of storybook
• (If needed) Update CHANGELOG.md
• (If possible) Add tests

[codecov]

Codecov Report

Attention: Patch coverage is 16.40697% with 912 lines in your changes missing coverage. Please review.

Project coverage is 19.28%. Comparing base (f123be3) to head (eac61ed).
Report is 1 commits behind head on develop.

Files with missing lines	Patch %	Lines
...rontend/src/components/MkWatermarkEditorDialog.vue	0.00%	393 Missing and 1 partial ⚠️
packages/frontend/src/scripts/watermark.ts	40.53%	179 Missing ⚠️
.../src/components/MkWatermarkEditorDialog.anchor.vue	0.00%	93 Missing and 1 partial ⚠️
...src/components/MkWatermarkEditorDialog.padding.vue	0.00%	65 Missing and 1 partial ⚠️
packages/frontend/src/scripts/select-file.ts	22.53%	55 Missing ⚠️
packages/frontend/src/pages/settings/drive.vue	0.00%	51 Missing ⚠️
packages/frontend/src/scripts/upload.ts	5.88%	16 Missing ⚠️
packages/frontend/src/store.ts	0.00%	13 Missing ⚠️
packages/frontend/src/components/form/link.vue	0.00%	12 Missing ⚠️
packages/frontend/src/pages/admin/roles.vue	0.00%	8 Missing ⚠️
... and 11 more

Additional details and impacted files

@@             Coverage Diff              @@
##           develop   #15136       +/-   ##
============================================
- Coverage    39.95%   19.28%   -20.67%     
============================================
  Files         1563      732      -831     
  Lines       197878   104887    -92991     
  Branches      3635      994     -2641     
============================================
- Hits         79059    20232    -58827     
+ Misses      118215    84098    -34117     
+ Partials       604      557       -47     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[kakkokari-gtyih]

描画処理と設定UIは概ね完成した
後は保存処理とかアップロード時のウォーターマーク適用処理とか細かい部分とかを詰めればreadyできそう

[kakkokari-gtyih]

とりあえずひととおり動くようになった

FullHD画質の画像でアップロード前処理（ウォーターマーク＋サイズ縮小）合計で1s位かかる
Web Workerで処理できるようになったら早められる？

[kakkokari-gtyih]

処理というよりかはウォーターマーク画像のfetchに時間がかかっているだけの可能性はある

[kakkokari-gtyih]

処理というよりかはウォーターマーク画像のfetchに時間がかかっているだけの可能性はある

ウォーターマークの画像サイズが小さかったらたいして処理に時間かからなかったのでこれっぽい
サイズがデカい画像を指定されたらMkInfoを出すようにすればいいか

[kakkokari-gtyih]

たぶんひととおりできた

[r-ca]

個人的な思想の問題ではありますが、ウォーターマーク(特に強い言葉を含んだもの)に嫌悪感があるのでこちら側でフィルタリングする何らかの方法を設けてほしいです。
これは面倒+すぐには難しいこと承知ですが、ウォーターマークを適用した画像 or ノートに何らかのフラグを立てて連合にながしてもらえると一番ありがたいです。
（連合されなくてもフラグが提供されていればこちらからAPIコールするなどやりようはあるので、それだけでも同時にリリースされると本当にありがたいです）

[kakkokari-gtyih]

肥大化するので、やるとしても別PRにしたほうが良さそうではある

[r-ca]

それは本当にそうで、特に連合は間違いなく別Issue→PRになるものだと思います
ただ、この処理がかかったノートにフラグを立てる（localで）だけでもありがたくて、これは同時に組み込まれてもおかしくないかなという意図のコメントでした

[kakkokari-gtyih]

肥大化するので、やるとしても別PRにしたほうが良さそうではある

(Off-topic) isSensitiveみたいに独立したプロパティを生やすべきか、propertiesに生やすべきか悩むわね