JavaScript 画像のオリジナルの幅を取得する
Imageオブジェクトのwidthプロパティとheightプロパティは、現在、表示されている画像のサイズを示しています。表示されている画像サイズではなく元々の画像サイズを取得するには、Imageオブジェクトの「naturalWidthプロパティ」と「naturalHeightプロパティ」を参照します。「naturalWidthプロパティ」は横幅、「naturalHeightプロパティ」は縦幅で読み出された数値の単位はピクセルになります。
<body>
<script>
window.addEventListener("load" , function(){
var btn = document.getElementsByTagName("input");
//img要素を読みだす
var myImage = document.getElementsByTagName("img")[0];
//ボタンにイベントを設定する
btn[0].addEventListener("click", function(){
var ele = document.getElementsByTagName("output")[0];
//表示されている画像の横幅を読みだす
var w = myImage.naturalWidth;
//表示されている画像の縦幅を読み出す
var h = myImage.naturalHeight;
ele.innerHTML = "横幅:"+w+"縦幅:"+h;
},false);
btn[1].addEventListener("click", function(){
//表示されている画像の横幅を320pxにする
myImage.width = myImage.naturalWidth;
//表示されている画像の縦幅を240pxにする
myImage.height = myImage.naturalHeight;
},false);
}, false);
</script>
<div>
<img src="./images/629959_s.jpg" width ="80" height="60">
</div>
<form>
<input type="button" value="画像の元の幅を取得">
<input type="button" value="画像の元の幅に変更">
</form>
<output></output>
</body>画像の元の幅を取得ボタンをクリックすると、画像の元の横幅と縦幅が表示されます。
画像を元の幅に変更ボタンをクリックすると、元の画像のサイズに変わります。
