【JavaScript】Web（HTTP）上の画像から縦横のサイズを取得する
更新日：2023/02/06
Web上の画像のサイズを取得するコードをJavaScriptで作成してみます。
概要
Imageオブジェクトを作成してsrcプロパティをセットすると、Web上の画像を読み込んでくれます。
読み込み完了時点でイベントが発生するので、Imageオブジェクトから読み込んだ画像をサイズを取得して表示するだけです。
次のようなコードになります。
const image = new Image();
image.onload = ()=>{ // 読み込み完了
const width = image.width;
const height = image.height;
// 表示処理
・・・・
};
image.onerror = ()=>error("読み込めませんでした");
image.src = url;
コード例
実際にコードを作成してみます。
まずはHTMLコード。
URLの入力欄とボタンがあります。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ネット画像のサイズ確認</title>
<script src="imagesize.js"></script>
</head>
<body>
<p><label>URL:<input id="filename" type="text" size="100" value=""></label></p>
<p id="result"></p>
<p><button id="button" type="button">サイズ確認</button>
</body>
</html>
<?php
表示すると、次のようなイメージです。
次に、HTMLコードで読み込んでいるJavaScriptコードです。
document.addEventListener("DOMContentLoaded",()=>{
// 各要素の取得
const [filename,result,button]
= ["filename","result","button"].map(e=>document.getElementById(e));
// ボタンクリックイベント
button.addEventListener("click",()=>{
const url = filename.value;
if( !url.startsWith("http://") && !url.startsWith("https://") ){
error("URLが不正です");return;
}
getimagesize( url );
});
// 画像サイズを取得
const getimagesize = url =>{
const image = new Image();
image.onload = ()=>{ // 読み込み完了
output( image.width , image.height , url );
};
image.onerror = ()=>error("読み込めませんでした");
image.src = url;
};
// エラーメッセージ表示
const error = msg =>{
result.innerText = msg;
result.style.color = "red";
};
// 結果表示
const output = (width,height,url)=>{
const imgtag = htmlspecialchars(`<img src="${url}" width="${width}" height="${height}">`);
result.style.color = "";
result.innerHTML = `<p>幅：${width} 高さ：${height}<br>タグ：${imgtag}</p>`;
};
// タグをエスケープ
const htmlspecialchars = htmltag =>
htmltag.replace(/[<>&'`"]/g,m=>({
'<': '<','>': '>','&': '&',"'": ''','`': '`','"': '"',
})[m]);
});
確認ボタンを押すと、次のような結果が得られます。
PHP側（サーバー側）で画像サイズを確認
今回のように動的に画像サイズを取得するときは、サーバーの負荷分散の意味から、個々のパソコンやスマホ上で取得した方がいいです。
しかし何らかの理由で、サーバーで画像サイズを取得することがあると思います。
その場合は、次のページを参考にしてみてください。
更新日：2023/02/06
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
