【備忘録】画像の比率を保ったまま縮小する方法

作成日：2025-02-20 17:35:59
最新更新日：2025-02-20 17:50:07

結論

目標の横幅 ÷ (画像の横幅 ÷ 画像の縦幅)

計算結果は小数点が混じる場合が有るので、Math.floorしましょう
おそらくこの世の9割の画像処理は小数点を入れたらバグる

実際の例

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

/Data/Blog/d85ff3e1a653c479a5763ef960388e1f_1740040846

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

/Data/Blog/d85ff3e1a653c479a5763ef960388e1f_1740040904

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

JavaScriptで書いてみよう

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

前提:FileSelectというtype="file"のinput要素がある。

	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);
		}
	});

ログインするとコメントを書くことができます

もっとコメントを見る