にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

画像本来の大きさ(オリジナルサイズ)を取得して、指定倍率で画像サイズを変更する方法 [装飾・内容変更]

HTMLでもCSSでも画像を自由な大きさで表示できますが、画像本来の大きさ(=画像オリジナルの横幅・高さ)はJavaScriptを使うことで得られます。方法は簡単で、ImageオブジェクトのnaturalWidthプロパティやnaturalHeightプロパティを参照するだけです。これを活用すれば、画像本来のサイズを基準にしてキリの良い倍率で画像を綺麗に拡大・縮小させられます。

JavaScriptを使えば、画像の現在の表示サイズに関係なく、画像オリジナルの(元々の)サイズを取得できる

ウェブ上に掲載する画像の大きさは、HTMLでもCSSでもJavaScriptでも自由に指定できるため、画像オリジナルの(元々の)大きさを無視したサイズで表示されている場合も多々あります。
HTMLでimg要素にwidth属性もheight属性も付加しない状態で表示すれば、画像はオリジナルの大きさで表示されます。しかし、CSSでサイズが調整されていれば別です。
なので、ウェブ上の表示を見ただけでは、その画像オリジナルの大きさは分かりません。
しかし、実はJavaScriptを使えば、その画像がどんな大きさで表示されていようとも、オリジナルの大きさを調べる(得る)ことはできます。

画像オリジナルの(本来の)横幅・高さを得る方法(現在の表示サイズではなく)

現在表示されているサイズではなく、その画像オリジナルの(本来の)サイズを得るには、naturalWidthプロパティやnaturalHeightプロパティを使います。例えば以下のように記述します。

var OrgWidth = document.getElementById('sampleImage').naturalWidth;
var OrgHeight = document.getElementById('sampleImage').naturalHeight;

このように記述すると、id="sampleImage"を指定したimg要素で読み込んでいる画像に関して、

  • 変数OrgWidthには、その画像オリジナルの横幅が格納され、
  • 変数OrgHeightには、その画像オリジナルの高さが格納されます。

※これらのプロパティは、Internet ExplorerではIE9以降のみで使えます。それ以外の代表的なブラウザでは昔から使えます。

画像オリジナルの(本来の)サイズを基準にして、キリの良い倍率で画像を綺麗に拡大・縮小させる例

画像の表示サイズをJavaScript変更するには、Imageオブジェクトのwidthプロパティやheightプロパティに値を入れるだけで済みます。(現在の表示サイズを知りたい場合にも、このwidthプロパティやheightプロパティを参照すれば分かります。)
ただ、できるだけ綺麗に拡大・縮小させたいなら、画像の本来のサイズを基準にして、50%・25%などの「切りの良い割合」で変化させた方が良いかも知れません。
そんなときには、naturalWidthプロパティやnaturalHeightプロパティを使って「画像のオリジナルの幅・高さ」の値を調べてから、その値を元に画像の表示サイズを指定割合で変化させると良いでしょう。

以下は、表示中の画像を「画像オリジナルの大きさ」を基準にして様々な倍率で変化させるサンプルです。

以下に表示されている画像を、オリジナルのサイズを基準にして、様々なサイズに変更します。
草原のサンプル写真
現在の表示サイズ: 横 200px × 縦 133px

※上記に掲載している画像の本来のサイズは 300×200(px) ですが、初期状態ではHTMLによって、200×133(px)のサイズで表示されています。

画像を、オリジナルの(本来の)サイズで表示させるスクリプト

ある画像の表示サイズを、画像本来のサイズに変更するには、例えば以下のように記述します。

JavaScriptソース

var resizeImg = document.getElementById("targetImage");
resizeImg.width  = resizeImg.naturalWidth;
resizeImg.height = resizeImg.naturalHeight;

上記では、「targetImage」というid名が割り振られた画像に対して、本来の横幅(naturalWidthプロパティ)と本来の高さ(naturalHeightプロパティ)を得て、それを現在の表示サイズ(width・height両プロパティ)に代入しています。
これによって、画像の表示サイズが、その画像本来のサイズに変わります。

オリジナルの(本来の)サイズを基準にして、画像を指定倍に拡大・縮小する関数

冒頭の例のように、画像のオリジナルの(本来の)サイズを基準にして、指定の倍率で変化させるには、以下のように記述します。
ここでは、ボタンクリックで何度でも利用できるよう、resizeImagePercentという関数を作っています。

JavaScriptソース

function resizeImagePercent( resizeRate ) {
   var resizeImg = document.getElementById("targetImage");
   resizeImg.width  = resizeImg.naturalWidth  * resizeRate;
   resizeImg.height = resizeImg.naturalHeight * resizeRate;
}

この関数は、引数に「表示割合」を指定して使います。
この関数内では、「targetImage」というid名が割り振られた画像を画像オブジェクトにして、

  • 本来の横幅(naturalWidthプロパティ)に指定割合(resizeRate)を掛けた値を、横幅(widthプロパティ)に代入
  • 本来の高さ(naturalHeightプロパティ)に指定割合(resizeRate)を掛けた値を、高さ(heightプロパティ)に代入

……しています。
このresizeImagePercent関数は、以下のようにして使います。

resizeImagePercent( 表示割合 );

例えば、画像を(本来のサイズの)25%に縮小したい場合は、以下のように記述します。

resizeImagePercent( 0.25 );

画像を(本来のサイズの)200%(=2倍)に拡大したい場合は、以下のように記述します。

resizeImagePercent( 2 );

というわけで、画像オリジナルの(本来の)サイズを取得するには、naturalWidthプロパティとnaturalHeightプロパティを使えば良い、という話でした。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---