JavaScript プログラミング講座

 

画像イメージについて

 


■画像イメージについて


<IMG> タグを使用すると、画像を読み込んで表示することができます。
 
<IMG> タグを使用して画像を表示する

<html>
  <body>

    <img src="http://hakuhin.jp/graphic/title.png" width="312" height="112" alt="画像の解説文です" >

  </body>
</html>
 
サンプル表示

画像のサンプル表示です。
 

■ HTMLImageElement インターフェースについて

 
HTMLImageElement インターフェースは、<IMG> タグに相当します。
 
エレメントの一種です。
 
画像を読み込んで表示するための機能がまとまっています。
 
このページでは、HTMLImageElement インターフェースで供給される機能について解説しています。
 
■ HTMLImageElement インターフェースの派生について

HTMLImageElement インターフェースは、以下の様に派生しています。
 
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
 
Object
↓派生
EventTarget
↓派生
Node
↓派生
Element
↓派生
HTMLElement
↓派生
HTMLImageElement
 


 

画像イメージを作成する

 
 


■画像イメージを作成する

 
■HTMLImageElement オブジェクトを作成する
 
document.createElement() メソッドを使用します。
 
引数に、"img" を指定します。
 
動的に HTMLImageElement オブジェクトを作成する

// HTMLImageElement オブジェクトを作成する
var image = document.createElement("img");

// 出力テスト
console.log(image);
 
■ Image() コンストラクタを使用する
 
new 演算子を使って、Image コンストラクタをインスタンス化する事もできます。
 
引数から、表示サイズを指定することができます。
 
引数を省略した場合、画像の読み込みを行うと、画像のサイズと表示のサイズが同じになります。
 
new Image( width , height ) :HTMLImageElement
第01引数(略可)Number表示の幅(単位:ピクセル値)(width 属性と同等)
第02引数(略可)Number表示の高さ(単位:ピクセル値)(height 属性と同等)
戻り値 HTMLImageElement新しく作成された HTMLImageElement オブジェクト
 
Image コンストラクタを使って、動的に HTMLImageElement オブジェクトを作成する

// HTMLImageElement オブジェクトを作成する
var image = new Image();

// 出力テスト
console.log(image);
 

■画像イメージをブラウザに表示する


HTMLImageElement オブジェクトを、ブラウザに表示するには、任意のノードリストに登録します。
 
画像イメージを動的に作成して、ブラウザに表示する

// HTMLImageElement オブジェクトを作成する
var image = new Image();

// URL を指定して、画像の読み込みを開始する
image.src = "http://hakuhin.jp/graphic/title.png";

// BODY のノードリストに登録する
document.body.appendChild(image);
 

■HTMLImageElement オブジェクトを取得する

 
■静的な <IMG> タグから取得する
 
任意のエレメントを取得する方法は、こちらで解説しています。
 
静的な <IMG> タグから、HTMLImageElement オブジェクトを取得する

<html>
  <body>

    <img id="aaa" src="http://hakuhin.jp/graphic/title.png" width="312" height="112" >

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var image = document.getElementById("aaa");

	// 出力テスト
	console.log(image);

    //-->
    </script>

  </body>
</html>
 
■ DOM ツリーに存在する画像イメージを、まとめて取得する
 
doucment.images プロパティを使用します。
 
HTMLCollection オブジェクトが得られます。
 
HTMLCollection オブジェクトは、配列のように中身を取り出せます。
 
中には、HTMLImageElement オブジェクトが格納されています。
 
DOM ツリーに存在する画像イメージを、まとめて取得する

// ------------------------------------------------------------
// DOM ツリーに存在する画像イメージを、まとめて取得する
// ------------------------------------------------------------
var image_list = document.images;

// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
var i;
var num = image_list.length;
for(i=0;i < num;i++){

	// HTMLImageElement オブジェクトを取得する
	var image = image_list[i];

	// 出力テスト
	console.log(image);
}
 


 

画像ファイルを読み込む

 
 


■ URL アドレスを指定して、画像ファイルの読み込みを開始する


外部にある画像ファイルを読み込むには、src プロパティを使用します。
 
画像ファイルの URL アドレスを、文字列で指定します。
 
Data URI SchemeBlob URL Scheme を指定する事もできます。
 
src プロパティに書き込みアクセスを行うと、画像の読み込みを開始します。
 
URL を指定して、画像の読み込みを開始する

// HTMLImageElement オブジェクトを作成する
var image = new Image();

// URL を指定して、画像の読み込みを開始する
image.src = "http://hakuhin.jp/graphic/title.png";

// BODY のノードリストに登録する
document.body.appendChild(image);
 


 

画像ファイルの読み込み状況を調べる

 
 


■読み込み途中であるか調べる


読み込み途中であるか調べるには、complete プロパティを使用します。
 
「読み込み途中」であれば、false が得られます。
 
「読み込んでいない」場合や「読み込み完了済み」であれば、true が得られます。
 
src プロパティに書き込みアクセスを行った時点で、false に変化します。
 
成功や失敗に関係なく、画像の読み込みが完了した時点で、true に戻ります。
 
読み込み途中であるか調べる

// ------------------------------------------------------------
// 画像イメージ
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
var image = new Image();

// BODY のノードリストに登録する
document.body.appendChild(image);


// ------------------------------------------------------------
// 12 フレームレート間隔で実行する
// ------------------------------------------------------------
setInterval(function (){

	if(image.complete){
		console.log("画像ファイルを読み込んでいないか、読み込みが完了している");
	}else{
		console.log("画像ファイルを読み込み途中である");
	}

},1000/12);


// ------------------------------------------------------------
// URL を指定して、画像の読み込みを開始する
// ------------------------------------------------------------
image.src = "http://hakuhin.jp/graphic/title.png";
 

■画像ファイルの読み込みが成功したか調べる


画像の読み込みに成功したか調べるには、onload イベントを使用します。
 
サーバーによっては、アクセスエラー時に、エラー用の画像を返すことがあります。
 
エラー用の画像の読み込みに成功した場合も、このイベントが発行されます。
 
画像の読み込みに成功したか調べる

// ------------------------------------------------------------
// 画像イメージ
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
var image = new Image();

// BODY のノードリストに登録する
document.body.appendChild(image);


// ------------------------------------------------------------
// 画像ファイルの読み込みに成功したときに実行される関数
// ------------------------------------------------------------
function ImageLoadFunc(e){
	console.log("画像ファイルの読み込みに成功した");
}


// ------------------------------------------------------------
// リッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(image.addEventListener){
	image.addEventListener("load",ImageLoadFunc);

// アタッチイベントに対応している
}else if(image.attachEvent){
	image.attachEvent("onload",ImageLoadFunc);

// イベントハンドラを使用する
}else{
	image.onload = ImageLoadFunc;
}


// ------------------------------------------------------------
// URL を指定して、画像の読み込みを開始する
// ------------------------------------------------------------
image.src = "http://hakuhin.jp/graphic/title.png";
 

■画像ファイルの読み込みが失敗したか調べる


画像の読み込みに失敗したか調べるには、onerror イベントを使用します。
 
イベントハンドラを使用して画像の読み込みに失敗したか調べる

// ------------------------------------------------------------
// 画像イメージ
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
var image = new Image();

// BODY のノードリストに登録する
document.body.appendChild(image);


// ------------------------------------------------------------
// 画像ファイルの読み込みに成功したときに実行される関数
// ------------------------------------------------------------
function ImageErrorFunc(e){
	console.log("画像ファイルの読み込みに失敗した");
}


// ------------------------------------------------------------
// リッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(image.addEventListener){
	image.addEventListener("error",ImageErrorFunc);

// アタッチイベントに対応している
}else if(image.attachEvent){
	image.attachEvent("onerror",ImageErrorFunc);

// イベントハンドラを使用する
}else{
	image.onerror = ImageErrorFunc;
}


// ------------------------------------------------------------
// URL を指定して、画像の読み込みを開始する
// ------------------------------------------------------------
image.src = "http://hakuhin.jp/graphic/title.png";
 


 

画像のサイズを取得する

 
 


■画像ファイルのサイズを取得する


画像ファイルのサイズを取得するには、以下のプロパティを使用します。
 
InternetExplorer 8 以前では、対応していません。
 
プロパティ名説明
naturalWidthNumber画像ファイルの幅を取得する。(単位:ピクセル)
naturalHeightNumber画像ファイルの高さを取得する。(単位:ピクセル)
 
■InternetExplorer 8 以前の場合
 
画像ファイルのサイズを取得するための関数です。
 
InternetExplorer 8 以前でも取得可能です。
 
画像ファイルのサイズを取得する

// ------------------------------------------------------------
// イメージのデフォルトのサイズを取得
// ------------------------------------------------------------
function ImageGetNaturalSize(image) {
	if(image.naturalWidth === undefined){
	}else if(image.naturalHeight === undefined){
	}else{
		return {
			width :image.naturalWidth,
			height:image.naturalHeight
		};
	}

	image = image.cloneNode(false);
	image.style.cssText = "";
	image.removeAttribute("width");
	image.removeAttribute("height");
	document.body.appendChild(image);
	var w = image.width;
	var h = image.height;
	image.parentNode.removeChild(image);

	return { width :w,height:h};
}
 
■取得例
 
読み込んだ画像ファイルのサイズを調べる

// ------------------------------------------------------------
// イメージのデフォルトのサイズを取得
// ------------------------------------------------------------
function ImageGetNaturalSize(image) {
	if(image.naturalWidth === undefined){
	}else if(image.naturalHeight === undefined){
	}else{
		return {
			width :image.naturalWidth,
			height:image.naturalHeight
		};
	}

	image = image.cloneNode(false);
	image.style.cssText = "";
	image.removeAttribute("width");
	image.removeAttribute("height");
	document.body.appendChild(image);
	var w = image.width;
	var h = image.height;
	image.parentNode.removeChild(image);

	return { width :w,height:h};
}


// ------------------------------------------------------------
// 画像イメージ
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
var image = new Image();

// BODY のノードリストに登録する
document.body.appendChild(image);


// ------------------------------------------------------------
// 画像ファイルの読み込みに成功したときに実行されるイベント
// ------------------------------------------------------------
image.onload = function (e){

	// 画像ファイルのサイズを取得する
	var image_size = ImageGetNaturalSize(image);

	// 出力テスト
	console.log("w:" + image_size.width);
	console.log("h:" + image_size.height);
};


// ------------------------------------------------------------
// URL を指定して、画像の読み込みを開始する
// ------------------------------------------------------------
image.src = "http://hakuhin.jp/graphic/title.png";
 

■エレメントの表示サイズを取得する


エレメントの表示サイズを取得するには、以下のプロパティを使用します。
 
エレメントのサイズを取得する方法は、こちらでも解説しています。
 
プロパティ名説明
widthNumber表示サイズの幅を取得する。(単位:ピクセル)
heightNumber表示サイズの高さを取得する。(単位:ピクセル)
 
■測定方法
 
このプロパティは、padding の内側から測定します。
 
スタイルシートの width や height と同等です。(ピクセル値指定の場合)
 
 
■取得例
 
画像の表示サイズを調べる

// ------------------------------------------------------------
// 画像イメージ
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
var image = new Image();

// スタイルを設定する
image.style.cssText = "width:100%; height:100%;";

// BODY のノードリストに登録する
document.body.appendChild(image);


// ------------------------------------------------------------
// 画像ファイルの読み込みに成功したときに実行されるイベント
// ------------------------------------------------------------
image.onload = function (e){

	// 表示サイズを取得する
	var w = image.width;
	var h = image.height;

	// 出力テスト
	console.log("w:" + w);
	console.log("h:" + h);
};


// ------------------------------------------------------------
// URL を指定して、画像の読み込みを開始する
// ------------------------------------------------------------
image.src = "http://hakuhin.jp/graphic/title.png";
 


 

画像のプロパティについて

 


■画像のプロパティ一覧

 
HTMLImageElement インターフェースで利用可能な、プロパティの一覧です。(一部抜粋)
 
■ HTMLImageElement インターフェース
 
プロパティ名説明
altString代替テキストを指定する。
srcString画像ファイルの URL アドレスを、文字列で指定する。
useMapStringクライアントサイドイメージマップを使用する場合、<MAP> 要素の名前を 『#名前』で指定する。
isMapBooleanサーバサイドイメージマップを使用する場合、true を指定する。
naturalWidthNumber画像ファイルの幅を取得する。(単位:ピクセル)
naturalHeightNumber画像ファイルの高さを取得する。(単位:ピクセル)
widthNumber表示サイズの幅を取得する。(単位:ピクセル)
heightNumber表示サイズの高さを取得する。(単位:ピクセル)
completeBoolean読み込み処理中であれば false、それ以外であれば true が得られる。