JavaScriptで画像の本来のサイズを取得する
2024-04-02
JavaScriptで画像のサイズ（高さ・幅）を取得する方法
naturalWidthとnaturalHeightプロパティを使用する
この方法は、画像が完全にロードされた後に、naturalWidthとnaturalHeightプロパティを使用して、画像の本来の幅と高さを取得します。
const image = document.getElementById('my-image');
// 画像がロードされたら実行
image.onload = function() {
const width = image.naturalWidth;
const height = image.naturalHeight;
// 幅と高さを処理
console.log(`幅: ${width}px, 高さ: ${height}px`);
};
getBoundingClientRectメソッドを使用する
この方法は、getBoundingClientRectメソッドを使用して、画像の現在の表示領域の幅と高さを取得します。
const image = document.getElementById('my-image');
const rect = image.getBoundingClientRect();
// 幅と高さを処理
console.log(`幅: ${rect.width}px, 高さ: ${rect.height}px`);
jQueryを使用している場合は、width()とheight()メソッドを使用して、画像の幅と高さを取得できます。
const image = $('#my-image');
const width = image.width();
const height = image.height();
// 幅と高さを処理
console.log(`幅: ${width}px, 高さ: ${height}px`);
注意点
naturalWidthとnaturalHeightプロパティは、画像が完全にロードされた後にしか使用できません。getBoundingClientRectメソッドは、画像の現在の表示領域の幅と高さを取得します。画像が縮小または拡大されている場合、実際のサイズとは異なる場合があります。- jQueryを使用する場合は、事前にjQueryライブラリを読み込む必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像のサイズを取得</title>
</head>
<body>
<img id="my-image" src="image.jpg" alt="画像">
<script>
// 1. naturalWidthとnaturalHeightプロパティを使用する
const image = document.getElementById('my-image');
image.onload = function() {
const width = image.naturalWidth;
const height = image.naturalHeight;
console.log(`幅: ${width}px, 高さ: ${height}px`);
};
// 2. getBoundingClientRectメソッドを使用する
const rect = image.getBoundingClientRect();
console.log(`幅: ${rect.width}px, 高さ: ${rect.height}px`);
// 3. jQueryを使用する
const $image = $('#my-image');
const width = $image.width();
const height = $image.height();
console.log(`幅: ${width}px, 高さ: ${height}px`);
</script>
</body>
</html>
このコードをブラウザで実行すると、コンソールに以下の出力が表示されます。
幅: 400px, 高さ: 300px
幅: 200px, 高さ: 150px
幅: 200px, 高さ: 150px
1つ目の出力は、画像の本来の幅と高さです。2つ目の出力は、画像の現在の表示領域の幅と高さです。3つ目の出力は、jQueryを使用して取得した画像の幅と高さです。
実行環境
- ブラウザ: Chrome, Firefox, Safari, Edge
- JavaScript: ES6
注意事項
- 画像の読み込みが完了する前に
naturalWidthとnaturalHeightプロパティにアクセスすると、0が返されます。
画像のサイズを取得するその他の方法
Imageオブジェクトを使用して、画像のサイズを取得できます。
const image = new Image();
image.onload = function() {
const width = image.width;
const height = image.height;
// 幅と高さを処理
console.log(`幅: ${width}px, 高さ: ${height}px`);
};
image.src = 'image.jpg';
const reader = new FileReader();
reader.onload = function() {
const arrayBuffer = reader.result;
const fileSize = arrayBuffer.byteLength;
// ファイルサイズを処理
console.log(`ファイルサイズ: ${fileSize}バイト`);
};
reader.readAsArrayBuffer('image.jpg');
サーバサイドで画像のサイズを取得することもできます。
<?php
$image = getimagesize('image.jpg');
$width = $image[0];
$height = $image[1];
// 幅と高さを処理
echo "幅: {$width}px, 高さ: {$height}px";
?>
Imageオブジェクトを使用する方法は、画像が完全にロードされた後にしか使用できません。FileReaderオブジェクトを使用する方法は、画像ファイルを読み込む必要があるため、時間がかかる場合があります。- サーバサイドで取得する方法は、サーバ側の処理が必要になるため、複雑になります。
javascript jquery image
