どうも！LSSです！！
JavaScriptの小ネタで、なにげにやったこと無かった？事をやってみます。
ブログなどのWebページに画像ファイルを配置する事がよくありますね。
あれはまず、画像ファイルをアップロードしておき、ブログなどのWebページからそれを呼び出す<img>タグによって呼び出して表示しています。
その際「画像の幅」「画像の高さ」という「サイズ」は２種類の意味にわかれる事になります。
- 画像ファイルそのもののサイズ
- imgタグによって描きだされた表示上のサイズ
今回はこの２種類ある「サイズ」の概念の、それぞれ幅と高さをJavaScriptから読み取って表示してみる実験です。
画像サイズ取得実験！
コード
<p><img id="img0" width="100%" src="画像ファイルのURL" /></p>
<div id="gamen"> </div>
<script>// <![CDATA[
img0.addEventListener('load',imgload,false);
function imgload(){
gamen.innerHTML=
'画像ファイルの幅:'+img0.naturalWidth
+'<br/>画像ファイルの高さ:'+img0.naturalHeight
+'<br/>画像の表示上の幅:'+img0.width
+'<br/>画像の表示上の高さ:'+img0.height;
}
// ]]></script>
説明
<img id="img0" width="100%" src="画像ファイルのURL" />
まず、↑のタグによって、指定した画像ファイルをページ上に表示しています。
srcはどの画像を表示するのかという指定です。
他に、
id="img0"
は、スクリプトから読みに行く時に必要となるidを指定しており、
width="100%"
は「画像を表示領域の幅いっぱいいっぱい」に表示させる指定です。
この記事の場合、記事本文表示領域の幅いっぱいに表示する事になります。
こうして、idをつけておくと、
img0.naturalWidth
img0.naturalHeight
で、そこに呼び出した画像ファイル自体の幅と高さ、
img0.width
img0.height
で、表示されている幅と高さのサイズを読み取る事ができます！
…ただし、naturalWidthとnaturalHeightは「その画像の読み込みが完了していないと読み取れない」ために、
img0.addEventListener('load',imgload,false);
として
「img0の要素が読み込み完了した時に、幅や高さを読み取る関数を実行する」
ように指定しています。
あとがき
今回の実験は、
↑これでやろうとしていた事をスクリプトの力を借りて実現する…ための、まず計算材料となるデータをスクリプトで読み取るための実験でした^^
この２種類のサイズ×幅＆高さの４つの数字が取得できたので、計算に必要なデータは出そろった事になります。
あとはまた…この数値をCSSに当て込んで、期待通りの画像に仕上げられるか、を試さなきゃですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
