• Imageオブジェクトのコンストラクタ
• document.imagesプロパティ
• Imageオブジェクトのプロパティ
• 実例

Imageオブジェクトのコンストラクタ

JavaScriptでは、Imageコンストラクタを使用して新しい画像オブジェクトを作成できます。この方法は、HTML内の要素を直接操作するのではなく、プログラムで動的に画像を生成するのに便利です。

let image = new Image([width, height]);

ここで、widthとheightは省略可能で、画像の初期サイズを指定できます。

例:

let img = new Image(200, 100);
img.src = 'example.jpg';
document.body.appendChild(img);

document.imagesプロパティ

document.imagesは、現在のドキュメント内に存在するすべての要素のコレクションを表します。このコレクションを使用して、ページ内の画像を動的に取得および操作できます。

例:

console.log(document.images.length); // ページ内の画像の数を表示
console.log(document.images[0].src);  // 最初の画像のsrcを表示

画像には名前やIDでアクセスすることも可能です。

// IDでアクセス
let imageById = document.images['imageID'];
console.log(imageById.src);

// インデックスでアクセス
let firstImage = document.images[0];
console.log(firstImage.src);

Imageオブジェクトのプロパティ

Imageオブジェクトには、以下のような多くのプロパティが用意されています:

• src: 画像のURLを指定または取得します。
• name: 画像の名前を設定または取得します（非推奨）。
• width: 画像の幅をピクセル単位で指定または取得します。
• height: 画像の高さをピクセル単位で指定または取得します。
• hspace: 画像の水平余白を取得または設定します（非推奨）。
• vspace: 画像の垂直余白を取得または設定します（非推奨）。
• border: 画像のボーダーの幅を取得または設定します（非推奨）。
• lowsrc: 低解像度の画像URLを指定します（非推奨）。
• complete: 画像が完全にロードされたかどうかを示すブール値。

例:

let img = document.images[0];
console.log(img.width);        // 幅を表示
console.log(img.height);       // 高さを表示
console.log(img.complete);     // ロードが完了しているか

実例

ここでは、実際の画像操作の例をいくつか示します。

画像の動的変更:

let img = document.images[0];
img.src = 'new-image.jpg'; // 新しい画像を設定
img.width = 300;           // 幅を300ピクセルに設定
img.height = 200;          // 高さを200ピクセルに設定

全画像の情報を取得:

for (let i = 0; i < document.images.length; i++) {
    let img = document.images[i];
    console.log(`画像 ${i + 1}:`);
    console.log(`- URL: ${img.src}`);
    console.log(`- 幅: ${img.width}px`);
    console.log(`- 高さ: ${img.height}px`);
}

画像がロードされたかを確認:

let img = new Image();
img.onload = () => {
    console.log('画像が正常にロードされました。');
};
img.onerror = () => {
    console.log('画像のロードに失敗しました。');
};
img.src = 'example.jpg';