プロフィール画像とトリミング
プリザンターには、ユーザー・グループ・組織のプロフィール画像はありません。ユーザー名の表示には人型のアイコン（ui-icon-person）が使われます（HtmlHelpers.cs）。このページは、管理画面からプロフィール画像を設定でき、アップロード前に正方形に切り抜けるようにする本体改修の設計メモです。本体の標準機能ではありません。
前提にした現行実装
Binaries テーブルの画像の種類
| BinaryType | 用途 | 作るサイズ |
|---|---|---|
SiteImage | サイト画像 | Regular・Thumbnail・Icon |
TenantImage | テナントのロゴ | Logo |
Images | 説明項目などに貼った画像 | 元画像と（設定があれば）サムネイル |
TenantManagementImages | テナントの管理画面（ユーザー・グループ・組織など）で貼った画像 | 同上 |
画像を貼ったときの種類は、リファラーがテナントの管理画面なら TenantManagementImages、それ以外は Images です（BinaryUtilities.cs）。ユーザー・グループ・組織を削除すると、その ID を ReferenceId に持つ TenantManagementImages も削除されます（DeptModel.cs、GroupModel.cs）。
ImageData が扱う種類は SiteImage = 1 と TenantImage = 2 の 2 つです（ImageData.cs）。
サイト画像のアップロード（参考にする流れ）
図を読み込み中…
- ブラウザ側は
$p.uploadSiteImageがFormDataにファイルを入れて$p.multiUploadで送ります（sitesettings.js）。 - 検証はサイト管理権限と、ImageSharp の
Image.Load<Rgba32>で読めるかどうかです（BinaryValidators.cs）。 - 縮小は短い辺を目標に合わせるだけで、切り抜きはしません（サイト画像を正方形にする）。
設計
画像の種類
| 案 | BinaryType | 利点 | 欠点 |
|---|---|---|---|
| A | TenantManagementImages を使う | 削除時の後始末がすでにある | 管理画面に貼った画像と混ざる。ReferenceId はユーザー・グループ・組織で ID が重なりうる |
| B | ProfileImage を新しく作る | 用途がはっきりし、取得・削除が単純 | 削除時の後始末と検証を足す |
B にします。ID の重なりを避けるため、ユーザー・グループ・組織で BinaryType を分ける（UserImage・GroupImage・DeptImage）か、別の列で区別します。
ブラウザ側で切り抜く
ブラウザに正方形に切り抜かせてから送れば、サーバーの縮小処理は正方形の画像を受け取るので、現行の ReSize のままで正方形のまま縮まります。切り抜きのライブラリは本体に無いので追加します。
| ライブラリ | 特徴 |
|---|---|
| Cropper.js 2.x | Web Component（<cropper-canvas> など）で構成 |
| Cropper.js 1.x | 従来型。jQuery と組み合わせた実績が多い |
図を読み込み中…
// Cropper.js 2.x の例
const selection = document.querySelector('cropper-selection');
const canvas = await selection.$toCanvas({ width: 256, height: 256 });
canvas.toBlob(function (blob) {
const data = new FormData();
data.append('file', blob, 'profile.png');
$p.multiUpload(url, data, $control);
}, 'image/png');モーダルには、切り抜き範囲、拡大・縮小、（必要なら）回転、確定・キャンセルを置きます。
サーバー側
| ファイル | 内容 |
|---|---|
Libraries/Images/ImageData.cs | 種類に ProfileImage を足し、Regular・Thumbnail・Icon を作る |
Models/Binaries/BinaryUtilities.cs・BinaryModel.cs | 更新・削除・存在確認 |
Models/Binaries/BinaryValidators.cs | 本人かテナント管理者か、画像として読めるか、容量の上限 |
Controllers/BinariesController.cs | 取得（サイズ別）・更新・削除のアクション |
Models/Users/UserUtilities.cs ほか（Groups・Depts） | 編集画面に画像欄を足す |
Models/Users/UserModel.cs ほか（Groups・Depts） | 削除時に画像も消す |
Libraries/HtmlParts/HtmlHelpers.cs | ユーザー名の表示で画像を使う |
Users・Groups・Depts の列は増やさず、画像は Binaries に置くので、テーブル定義の変更はありません。UserModel などの Delete は生成コードに手で足した部分を含むので、CodeDefiner で生成し直すときに気をつけます。
ブラウザ側
| ファイル | 内容 |
|---|---|
wwwroot/package.json | 切り抜きライブラリを足す |
wwwroot/src/scripts/modules/ | 切り抜きモーダル（新規） |
wwwroot/src/scripts/generals/ | 管理画面から呼ぶアップロード処理 |
表示するときの負荷
ユーザー名は一覧・コメント・履歴などあちこちに出ます。表示のたびに画像の有無を DB に聞かないよう、SiteInfo のユーザー情報のキャッシュに「画像あり」の印を持たせ、画像の取得にはブラウザのキャッシュが効くようにします。一覧などでは小さい Icon サイズだけを使います。