【備忘録】画像の比率を保ったまま縮小する方法
| 作成日 | 2025-02-20 17:35:59 |
| 最新更新日 | 2025-02-20 17:50:07 |
結論
目標の横幅 ÷ (画像の横幅 ÷ 画像の縦幅)
計算結果は小数点が混じる場合が有るので、Math.floorしましょう
おそらくこの世の9割の画像処理は小数点を入れたらバグる
おそらくこの世の9割の画像処理は小数点を入れたらバグる
実際の例
私が作った中で一番でかい作品のるみ鯖でも使われてます
それがアカウントのアイコンを設定するやつです
こんな感じで、横幅がキャンバスのサイズをオーバーしていても、
いい感じに縦幅を調整してくれます。
縦に長い画像のほうがわかりやすいかも知れません、こんな感じで調整されます。
(ちなみに最近、マウスで拡大縮小と移動ができるようになりました、
数字を入力する必要はありません)
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);
}
});
ログインしたらコメントが書けますよ！