Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:46.

画像のオリジナルサイズを基準にして表示サイズを変更する

画像の表示サイズを変更するには、Imageオブジェクトのwidthプロパティやheightプロパティに値を入れるだけで済みます。
現在の表示サイズを知りたい場合にも、このwidthプロパティやheightプロパティを調べるだけで済みます。
画像表示用の領域の大きさが決まっていて、それに合うようにサイズを調整したいなら、その方法で良いでしょう。

ただ、できるだけ綺麗に拡大・縮小させたいなら、画像のオリジナルのサイズ(本来のサイズ)を基準にして、50%・25%などの「切りの良い割合」で変化させた方が良いかも知れません。
そんなときには、「画像のオリジナルの幅・高さ」の値を調べて、その値を元に画像の表示サイズを指定すると良いでしょう。

画像の本来の横幅・高さを得る(現在の表示サイズではなく)

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

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

このように記述すると、変数OrgWidthには「画像の本来の横幅」が、変数OrgHeightには「画像の本来の高さ」が格納されます。

以下は、表示中の画像を、様々なサイズに変化させるサンプルです。
掲載している画像のオリジナルのサイズは 300×200(px) ですが、初期状態ではHTMLによって、200×133(px) のサイズで表示されています。

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

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

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

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

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

本来のサイズを基準にして、画像を指定倍に拡大・縮小する関数

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

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 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど