画像の実寸を取得する方法
実行
htmlコード
<div>
画像の実寸を取得するテスト<br>
表示サイズの大きさにかかわらず取得されるサイズが同じとなることが確認できます。
</div>
<div id="button1" style="color:blue;cursor:pointer;">実寸表示画像の実寸を取得</div>
<div id="button2" style="color:blue;cursor:pointer;">200×160表示画像の実寸を取得</div>
<div id="DispSizeArea" style="color:red;border:solid 1px blue;padding:5px;">
上のボタンを押すと、ここにサイズが表示される。
</div>
<div style="height:260px;">
<div style="float:left;width:320px;">
下の画像の実寸は、280×210です。<br>
<img id="JisunImg" src="/pcspe/jqstudy/meisazan09.jpg" /><br>
</div>
<div style="float:left;width:240px;">
下の画像の実寸は、280×210ですが、<br>
サイズを200×160で表示しています。<br>
<img id="ResizeImg" style="width:200px;heigt:160px;" src="/pcspe/jqstudy/meisazan09.jpg" /><br>
</div>
<br style="clear:both;">
</div>
<script type='text/javascript'>
//実行テストのためのソース
$("#button1").click(function(){ChkGetImgSize(JisunImg,$(this).text());});
$("#button2").click(function(){ChkGetImgSize(ResizeImg,$(this).text());});
function ChkGetImgSize(imgId,msg){
var trueImgSize=img_true_size(JisunImg);
$("#DispSizeArea").html(
'<span style="color:black;">'+msg+'の時の</span>'+
"実寸幅="+trueImgSize.width+" 実寸高さ="+trueImgSize.height);
}
</script>
画像の実寸を取得するテスト<br>
表示サイズの大きさにかかわらず取得されるサイズが同じとなることが確認できます。
</div>
<div id="button1" style="color:blue;cursor:pointer;">実寸表示画像の実寸を取得</div>
<div id="button2" style="color:blue;cursor:pointer;">200×160表示画像の実寸を取得</div>
<div id="DispSizeArea" style="color:red;border:solid 1px blue;padding:5px;">
上のボタンを押すと、ここにサイズが表示される。
</div>
<div style="height:260px;">
<div style="float:left;width:320px;">
下の画像の実寸は、280×210です。<br>
<img id="JisunImg" src="/pcspe/jqstudy/meisazan09.jpg" /><br>
</div>
<div style="float:left;width:240px;">
下の画像の実寸は、280×210ですが、<br>
サイズを200×160で表示しています。<br>
<img id="ResizeImg" style="width:200px;heigt:160px;" src="/pcspe/jqstudy/meisazan09.jpg" /><br>
</div>
<br style="clear:both;">
</div>
<script type='text/javascript'>
//実行テストのためのソース
$("#button1").click(function(){ChkGetImgSize(JisunImg,$(this).text());});
$("#button2").click(function(){ChkGetImgSize(ResizeImg,$(this).text());});
function ChkGetImgSize(imgId,msg){
var trueImgSize=img_true_size(JisunImg);
$("#DispSizeArea").html(
'<span style="color:black;">'+msg+'の時の</span>'+
"実寸幅="+trueImgSize.width+" 実寸高さ="+trueImgSize.height);
}
</script>
html実行例
画像の実寸を取得するテスト
表示サイズの大きさにかかわらず取得されるサイズが同じとなることが確認できます。
表示サイズの大きさにかかわらず取得されるサイズが同じとなることが確認できます。
上のボタンを押すと、ここにサイズが表示される。
下の画像の実寸は、280×210です。
下の画像の実寸は、280×210ですが、
サイズを200×160で表示しています。
サイズを200×160で表示しています。
ソースコード
var img_true_size = function(image){
// get Image true size
var w = image.width ,
h = image.height ;
if ( typeof image.naturalWidth !== 'undefined' ) { // for Firefox, Safari, Chrome
alert('Firefox, Safari, Chrome Firefox, Safari, Chrome');
w = image.naturalWidth;
h = image.naturalHeight;
} else if ( typeof image.runtimeStyle !== 'undefined' ) { // for IE
alert('IE IE IE IE IE IE');
var run = image.runtimeStyle;
var mem = { w: run.width, h: run.height }; // keep runtimeStyle
run.width = "auto";
run.height = "auto";
w = image.width;
h = image.height;
run.width = mem.w;
run.height = mem.h;
} else { // for Opera
alert('Opera Opera Opera Opera Opera');
var mem = { w: image.width, h: image.height }; // keep original style
image.removeAttribute("width");
image.removeAttribute("height");
w = image.width;
h = image.height;
image.width = mem.w;
image.height = mem.h;
}
return {width:w, height:h};
}
PCHOME