画像の操作：
coverで配置した時のサイズを取得
指定したNodeの背景に background-size:cover として画像を配置した時の表示サイズを文字列で取得する。
Node
Nodeを渡す id値を文字列で指定してもよい
String
画像のパスを渡す
Bool1
算出したサイズを整数にする true = 整数化する ・ false = 整数化しない
Bool2
戻り値の形式を指定 true = 単位付きの横縦値 ・ false = 連想配列 ／ 省略した場合は true となる
●必須引数 ●オプション引数(省略可能)
記述例
$imgGetCoverSize($id('block1'), "images/sample.jpg", true)
$imgGetCoverSize('block1', "images/sample.jpg", false, false)
戻り値
○第4引数がtrueの場合：CSSでbackground-sizeに設定できる単位付き文字列で返す
(例) 300px 140px
(例) 300.6437768240344px 140px
○第4引数がfalseの場合：横幅と高さの整数値を連想配列で返す
[横幅] RESULT.W または RESULT.width
[高さ] RESULT.H または RESULT.height
○取得できなかった場合
null を返す。
注意点
実際に指定Nodeのbackgorund-imageに設定するわけではない。それぞれのサイズを元に、coverサイズを算出する。
指定する画像は、この関数を実行する時点で既に読み込まれていてファイル情報を取得可能であることが条件となるため、HTMLやCSSでページに読み込まれている画像を指定するか、この関数を実行する前に$imgCache()関数などを利用してキャッシュに読み込んでおく必要がある。
動作サンプル
下のボックスの背景に background-size:cover で配置した場合のサイズを取得して出力する。
width: 300px
height: 300px
height: 300px
Javascript :
//画像をキャッシュしておく
$imgCache("images/pht_1.jpg","images/pht_big3.png");
HTML :
<button type="button" onclick="alert($imgGetCoverSize($id('sample1'),'images/pht_1.jpg',false))">○○</button>
<button type="button" onclick="alert($imgGetCoverSize('sample1','images/pht_big3.png',true,true))">○○</button>
<button type="button" onclick="alert($imgGetCoverSize('sample1','images/pht_big3.png',false,false).height)">○○</button>
<div id="sample1">
width: 300px<br>height: 300px
</div>
Sass :
#sample1 {
width: 300px;
height: 300px;
}
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。