JavaScript imageオブジェクトを生成する

画像を生成する際には、「new Image()」とします。パラメータには、生成する画像の横幅と縦幅を指定します（単位はピクセル）。省略した場合はオリジナル画像の幅が利用されます。画像の幅や高さは生成されたImageオブジェクトのwidthプロパティやheightプロパティを使って後から設定することも可能です。また、表示する画像は「src」プロパティにURLを代入します。注意点としては画像は非同期で読み込まれるので、Canvasなどで描画する場合には、Imageオブジェクトのonloadプロパティにイベントハンドラを設定し、イベントハンドラ内で画像を描画するようにします。なお、new Image()として画像を生成する以外に、「document.createElement(“img”)」として生成する方法もあります。

<body>
<script>
    window.addEventListener("load" , function(){
        var ele = document.getElementsByTagName("output")[0];
        //画像オブジェクトの作成
        var myImage = new Image(80,60);
        //画像のURLを設定
        myImage.src = "images/629959_s.jpg";
        ele.appendChild(myImage);
       
    }, false);

    
</script>
    <output></output>
</body>

Imageオブジェクトで生成された画像が表示されます。

カテゴリー:JavaScript