HTMLImageElement: Image() コンストラクター

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Image() コンストラクターは、新しい HTMLImageElement インスタンスを作成します。機能的には document.createElement('img') と同等です。

メモ: この関数を CSS の image() 関数と混同しないでください。

構文

js
new Image()
new Image(width)
new Image(width, height)

引数

width 省略可

画像の幅（つまり width 属性に対応する値）です。

height 省略可

画像の高さ（つまり height 属性に対応する値）です。

使用上の注意

ビットマップ全体は、コンストラクターで指定されたサイズに関係なく読み込まれます。コンストラクターで指定されたサイズは、結果のインスタンスのプロパティ HTMLImageElement.width と HTMLImageElement.height を通して反映されます。画像の本来の幅と高さは CSS ピクセルで表され、プロパティ HTMLImageElement.naturalWidth と HTMLImageElement.naturalHeight を通して反映されます。コンストラクターでサイズが指定されていない場合、両プロパティのペアは同じ値を持ちます。

例

js
const myImage = new Image(100, 200);
myImage.src = "picture.jpg";
document.body.appendChild(myImage);

これは、 <body> の中で次のような HTML タグを定義するのと同じです。

html
<img width="100" height="200" src="picture.jpg" />

仕様書

Specification
HTML Standard
# dom-image-dev

ブラウザーの互換性

BCD tables only load in the browser