TEXT FILE (   2KiB ) を受信しますか？ [Y]/[N] > Y

備忘録 画像処理 縮小 プログラミング

結論

目標の横幅 ÷ (画像の横幅 ÷ 画像の縦幅)
!{WARN}(計算結果は小数点が混じる場合が有るので、Math.floorしましょう
おそらくこの世の9割の画像処理は小数点を入れたらバグる)

実際の例

私が作った中で一番でかい作品のるみ鯖でも使われてます
それがアカウントのアイコンを設定するやつです
こんな感じで、横幅がキャンバスのサイズをオーバーしていても、
いい感じに縦幅を調整してくれます。

縦に長い画像のほうがわかりやすいかも知れません、こんな感じで調整されます。

(ちなみに最近、マウスで拡大縮小と移動ができるようになりました、
数字を入力する必要はありません)

JavaScriptで書いてみよう

おそらくこれが必要になるときってウェブなんですよね、てことで例です！

前提

	FileSelect.addEventListener("change", (e)=>{
		const File = FileSelect.files[0];
		if (File != null) {
			const READER = new FileReader();

			READER.onload = function(E){
				let IMG = new Image();
				IMG.src = READER.result;

				//onloadし終わった後じゃないと計算結果がNaNになります注意しろ
				IMG.onload = function() {
					//適当に画像一覧の配列にでも入れて
					ImageList.push(
						{
							IMG: IMG,
							X: 0,
							Y: 0,
							W: 300,
							//↓本題のコードはこれ
							H: Math.floor(300 / (IMG.width / IMG.height))
						}
					);

					//CANVASにでも描画する関数を用意して
					Draw();
				}
			}

			//ファイルを読み取る
			READER.readAsDataURL(File);
		}
	});