Fix(frontend): クロップ後の解像度が異様に低くなる問題の修正&クロップに失敗する問題&コメントにnullという文字列が入る問題の修正 (#13162)

* Fix(frontend): Fix resolution of cropped image (misskey-dev#11489)

* CHANGELOG

* Fix(frontend): クロップの際、folderIdがnullだと文字列のnullが送られ検索できない問題

* Fix: キャプションが存在しないときにクロップすると'null'がキャプションに入ってしまう問題 (misskey-dev#11813)

* Update CHANGELOG

CHANGELOG.md

@@ -62,6 +62,9 @@
 - Enhance: ページ遷移時にPlayerを閉じるように
 - Fix: iOSで大きな画像を変換してアップロードできない問題を修正
 - Fix: 「アニメーション画像を再生しない」もしくは「データセーバー（アイコン）」を有効にしていても、アイコンデコレーションのアニメーションが停止されない問題を修正
+- Fix: 画像をクロップするとクロップ後の解像度が異様に低くなる問題の修正
+- Fix: 画像をクロップ時、正常に完了できない問題の修正
+- Fix: キャプションが空の画像をクロップするとキャプションにnullという文字列が入ってしまう問題の修正
 
 ### Server
 - Enhance: 連合先のレートリミットに引っかかった際にリトライするようになりました

packages/frontend/src/components/MkCropperDialog.vue

@@ -63,18 +63,25 @@ const loading = ref(true);
 
 const ok = async () => {
 	const promise = new Promise<Misskey.entities.DriveFile>(async (res) => {
-		const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
+		const croppedImage = await cropper?.getCropperImage();
+		const croppedSection = await cropper?.getCropperSelection();
+
+		// 拡大率を計算し、(ほぼ)元の大きさに戻す
+		const zoomedRate = croppedImage.getBoundingClientRect().width / croppedImage.clientWidth;
+		const widthToRender = croppedSection.getBoundingClientRect().width / zoomedRate;
+
+		const croppedCanvas = await croppedSection?.$toCanvas({ width: widthToRender });
 		croppedCanvas?.toBlob(blob => {
 			if (!blob) return;
 			const formData = new FormData();
 			formData.append('file', blob);
 			formData.append('name', `cropped_${props.file.name}`);
 			formData.append('isSensitive', props.file.isSensitive ? 'true' : 'false');
-			formData.append('comment', props.file.comment ?? 'null');
+			if (props.file.comment) { formData.append('comment', props.file.comment);}
 			formData.append('i', $i!.token);
-			if (props.uploadFolder || props.uploadFolder === null) {
-				formData.append('folderId', props.uploadFolder ?? 'null');
-			} else if (defaultStore.state.uploadFolder) {
+			if (props.uploadFolder) {
+				formData.append('folderId', props.uploadFolder);
+			} else if (props.uploadFolder !== null && defaultStore.state.uploadFolder) {
 				formData.append('folderId', defaultStore.state.uploadFolder);
 			}