JavaScript プログラミング講座


画像イメージについて（HTMLImageElement）



・画像イメージについて
・画像イメージを作成する
・画像ファイルを読み込む
・画像ファイルの読み込み状況を調べる
・画像のサイズを取得する
・画像のプロパティについて

前のページに戻る

　

画像イメージについて

　


■画像イメージについて


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

<html>
  <body>

    <img src="https://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 = "https://hakuhin.jp/graphic/title.png";

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

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

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

<html>
  <body>

    <img id="aaa" src="https://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 Scheme や Blob URL Scheme を指定する事もできます。
　
src プロパティに書き込みアクセスを行うと、画像の読み込みを開始します。
　
URL を指定して、画像の読み込みを開始する

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

// URL を指定して、画像の読み込みを開始する
image.src = "https://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 = "https://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 = "https://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 = "https://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 = "https://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 = "https://hakuhin.jp/graphic/title.png";
　

上に戻る

　

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

　


■画像のプロパティ一覧

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

上に戻る

　
前のページに戻る