画像イメージを作成する
■HTMLImageElement について
画像を表示する方法の１つとして IMG タグを使用します。
IMG タグを使用して画像を表示する
<html>
<body>
<img src="http://hakuhin.jp/graphic/title.png" width="200" height="100" alt="画像の解説文です" >
</body>
</html>
IMG タグは、DOM オブジェクト上では HTMLImageElement となります。
■HTMLImageElement オブジェクトを作成する
HTMLImageElement オブジェクトを動的に作成するには、
「document.createElement()」メソッドか、「Image クラス」を使用します。
Image には、以下のような省略可能な引数があります。
new Image( 幅 , 高さ );
| 第01引数(略可) | イメージの幅（数値） |
| 第02引数(略可) | イメージの高さ（数値） |
| 戻り値 | HTMLImageElement オブジェクト |
サイズの指定には、数値を指定できます。"50%" といった文字列の指定はできません。
サイズを指定を省略した場合、「画像ファイルを読み込んだ際」に「読み込んだ画像ファイル」と同じサイズとなります。
作成例です。
createElement メソッドを使用して HTMLImageElement を作成
var img = document.createElement("img");
Image クラスを使用して HTMLImageElement を作成
var img = new Image();
画像ファイルを読み込んで表示する
■URL アドレスを指定して画像ファイルを読み込む
外部にある画像ファイルを読み込むには、src プロパティに、「画像ファイルまでの URL アドレス」を文字列で指定します。
src プロパティに文字列をセットしたタイミングから、画像の読み込みを試みるようになります。
画像ファイルまでの URL アドレスを文字列で指定する
var img = new Image();
img.src = "http://hakuhin.jp/graphic/title.png";
■画像を表示する
HTMLImageElement オブジェクトを DOM ノードに登録すると、画像の読み込み完了後に、ブラウザ上で表示されるようになります。
body の最後尾にエレメントを登録する
var img = new Image();
img.src = "http://hakuhin.jp/graphic/title.png";
// body の最後尾に登録する
document.body.appendChild(img);
画像ファイルの読み込み状況を調べる
■読み込み処理中であるか調べる
complete プロパティを使用すると、読み込み処理中であるか調べることができます。
画像ファイルの読み込み中であれば false、
画像ファイルを読み込んでいないか、読み込みが完了すると true となります。
src プロパティに値をセットした瞬間から false となります。その後 true になれば、成功したか失敗したかにかかわらず画像の読み込み処理が完了しています。
プロパティを使用して画像の読み込みが完了したか調べる
// ImageElement を作成する
var img = new Image();
// 12 fps 間隔で実行する
setInterval(function(){
if(img.complete){
console.log("画像ファイルを読み込んでいないか、読み込みが完了している");
}else{
console.log("画像ファイルを読み込み中である");
}
},1000/12);
// URL アドレスを指定する
img.src = "http://hakuhin.jp/graphic/title.png";
// body の最後尾に登録する
document.body.appendChild(img);
■画像ファイルの読み込みが成功したか調べる
画像の読み込みに成功したか調べるには、onload イベントハンドラを使用します。
サーバーが「エラー用の画像ファイル」を返すことがありますが、その「エラー用の画像ファイル」の読み込みに成功した場合にもこのイベントが呼び出されます。
イベントハンドラを使用して画像の読み込みに成功したか調べる
// ImageElement を作成する
var img = new Image();
// 画像読み込み成功時に実行されるイベント
img.onload = function(){
console.log("画像ファイルの読み込みに成功した");
}
// URL アドレスを指定する
img.src = "http://hakuhin.jp/graphic/title.png";
// body の最後尾に登録する
document.body.appendChild(img);
■画像ファイルの読み込みが失敗したか調べる
画像の読み込みに失敗したか調べるには、onerror イベントハンドラを使用します。
イベントハンドラを使用して画像の読み込みに失敗したか調べる
// ImageElement を作成する
var img = new Image();
// 画像読み込み失敗時に実行されるイベント
img.onerror = function(){
console.log("画像ファイルの読み込みに失敗した");
}
// URL アドレスを指定する
img.src = "http://hakuhin.jp/graphic/title.png";
// body の最後尾に登録する
document.body.appendChild(img);
画像のサイズを取得する
■画像ファイルのピクセルサイズを調べる（等倍の状態）
画像ファイルのピクセルサイズを調べるには、以下のプロパティを使用します。
naturalWidth で画像ファイルの幅を取得できます。
naturalHeight で画像ファイルの高さを取得できます。
読み込んだ画像ファイルのピクセルサイズを調べる
// ImageElement を作成する
var img = new Image();
// 画像読み込み成功時に実行されるイベント
img.onload = function(){
console.log("画像の幅:" + this.naturalWidth);
console.log("画像の高さ:" + this.naturalHeight);
}
// URL アドレスを指定する
img.src = "http://hakuhin.jp/graphic/title.png";
// body の最後尾に登録する
document.body.appendChild(img);
■HTMLImageElement のピクセルサイズを調べる
HTMLImageElement オブジェクトのピクセルサイズを調べるには、以下のプロパティを使用します。
width でHTMLImageElement オブジェクトの幅を取得できます。
height でHTMLImageElement オブジェクトの高さを取得できます。
padding や border や margin を含みません。
HTMLImageElement オブジェクトのピクセルサイズを調べる
// ImageElement を作成する
var img = new Image();
// スタイルを適応
img.style.width = "100%";
img.style.height = "100%";
// 画像読み込み成功時に実行されるイベント
img.onload = function(){
console.log("幅:" + this.width);
console.log("高さ:" + this.height);
}
// URL アドレスを指定する
img.src = "http://hakuhin.jp/graphic/title.png";
// body の最後尾に登録する
document.body.appendChild(img);
問答収集
