HTMLImageElement: Image() コンストラクター
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
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" />
仕様書
| 仕様書 |
|---|
| HTML> # dom-image-dev> |