例１：img への画像表示

<img scr="画像ＵＲＬ"> としたのと同じですが、動的に画像を変更するのに用います。
ＨＴＭＬ中の指定した <img id="例１画像表示場所"> に画像を表示。imgのサイズは画像のサイズに自動修正されます。

<script>
    function 例１() {
        // Ａ　画像読込以前の処理
        var 画像 = document.getElementById("例１画像表示場所"); // ア
        画像.onload = function() {                              // イ
            // Ｂ　画像読込後の処理　　例：画像.width =  200
            // （Ｄ・Ｅの呼出し）
        }                                                       // ウ
        画像.src = "picture/image1.jpeg";                       // エ
        // Ｃ　画像読込後の処理（のつもり）
        // Ｄ　function 内部関数() { ～ ]
    }
    // Ｅ　function 外部関数() { ～ ]
</script>

<p><button onclick="例１()">例１</button></p>
<img id="例１画像表示場所">                               <!-- オ -->

このパターンは、画像読込の基本形です。

• オが画像の表示場所であることを示すために、<img>である（divやpではない）ことが必要です。
• アでオの情報がメージオブジェクトとして定義されます。
  「var 画像 = new Image();」で定義した後、アの情報を受け取ることと同じことになります。 そのため、アを「var 画像 = "例１画像表示場所;」としたのではいけません。
• イは、「画像が読み込まれた後の処理（無名関数 function() ）を行え」という命令です。
  ここで画像を読み込むのではなく、エで読込み、読込が成功したらこの処理をするのです。
• エにより、オが<img src="picture/image1.jpeg">としたのと同じことになります。
• このような回りくどい記述をするのは、画像を探して読み込むまでに時間がかかるからです。
  （厳密に理解するには非同期処理やコントラクタなどの概念が必要になるので省略します。
  画像読込のときのオマジナイだと理解してください）
• ここでは対象となる画像ファイルが存在し、サイズも小さく短時間で読み込めることを前提にしています。
  そうでないときは、かなり複雑な記述になります。

注意事項

• 一見Ａ→Ｂ→Ｃの順に処理されると思われますが、イ～ウは関数ですので、Ａ→Ｃ→Ｂの順になります。
  そのため、Ｃで画像に関する情報を扱うことができません。
• Ｅの独立した外部関数は正しく処理されますが、Ｄの内部関数はエラーになります。
  画像読込後の処理が大量で、Ｂの場所に記述するのが不適切な場合は、必要とするすべてのデータを引数とする外部関数Ｆを作り、Ｂの最後で呼び出すか、それらの変数をグローバル変数に設定することになります。

例１

この下に <img id="例１画像表示場所"> があります。サイズの指定はありません。

img のサイズを変える。画像の拡大・縮小

    function 例１() {
        document.getElementById("例１画像表示場所").width  = 300;
        document.getElementById("例１画像表示場所").height = 300;
        var 画像 = document.getElementById("例１画像表示場所");

を加えると、img のサイズが変わり、そのサイズいっぱいに画像が拡大」・縮小します。
これでは画像の縦横比が崩れますが、.width、.height の一方を与えると自動的に縦横比を維持するよう調整されます。

例１Ａ

例２：画像ファイルの情報取得

例１では、画像ファイルを内部で指定しましたが、汎用化するために、外部から引数として与えることにし、その画像の絶対リンク、画像サイスを表示する例を示します。

<script>
    function 例２(画像ＵＲＬ, 表示場所) {
        var 画像 = new Image();          　　　　　　　　　 // ア
        画像.onload = function() {　　　　　　　　　　　　　// イ
　　　　　　// 画像読込後処理の記述
            document.getElementById(表示場所).innerHTML
                = "画像.src=" + 画像.src + "<br>"
                + "画像.width=" + 画像.width + "<br>"
                + "画像.height=" + 画像.height;
        }　　　　　　　　　　　　　　　　　　　　　　　　　　// ウ
        画像.src = 画像ＵＲＬ;　　　　　　　　　　　　　　　 // エ
　　　　// 画像読込後処理はここに記述できない
    }
</script>

<button onClick="例２('picture/image1.jpeg', '例２表示場所')">例３</button>
<div id="例２表示場所"></div>　　　<-- オ -->

例２

• 例１のアが、ここのアのように変わります。これはオが<img>ではなく、<img>になっており、その場所が引数として渡されているからです。
• エでは、ＵＲＬは相対パスなのでしが、srcは相対パスではなく、絶対パスになります。
• 画像読込後処理の記述は、イ～ウの内部で完結させる必要があります。

例２Ａ：画像処理後処理の外だし

画像.onload = function() { ～ } の内部で大量のコードを記述することになるのを避けるために、関数として外だしするほうが便利なことが多くあります。この場合、「画像」をグローバル変数として定義するか、引数として関数に渡すことが必要です。

<script>
    function 例２Ａ(画像ＵＲＬ, 表示場所) {
        var 画像 = new Image();
        画像.onload = function() {
            画像処理後処理(画像, 表示場所);
        }
        画像.src = 画像ＵＲＬ;
    }
    function 画像処理後処理(画像, 表示場所) {
        document.getElementById(表示場所).innerHTML
            = "画像.src=" + 画像.src + "<br>"
            + "画像.width=" + 画像.width + "<br>"
            + "画像.height=" + 画像.height;
    }
</script>

<button onClick="例２Ａ('picture/image1.jpeg', '例２表示場所')">例３</button>
<div id="例２表示場所"></div>　　　<-- オ -->

例２Ａ （結果は上の例２と同じ場所に表示されます）

例２Ｂ：img のサイズを変える。画像の拡大・縮小

画像を１.５倍拡大して表示します。

    function 例２Ｂ(画像ＵＲＬ, 画像表示場所) {
        var 画像 = document.getElementById("例１画像表示場所");
        画像.onload = function() {
            document.getElementById(画像表示場所).width  = 画像.width  * 1.5;
            document.getElementById(画像表示場所).height = 画像.height * 1.5; // 一方だけにする
        }
        画像.src = 画像ＵＲＬ;
    }

• 画像.width などは画像を読み込んでわかるので、画像.onload = function() { ～ } の内部で記述します。

例２Ｂ

    function 例３(画像ＵＲＬ, 画像表示場所) {
        var 画像 = document.getElementById(画像表示場所);
        画像.onload = function() {
            // サイズに関する記述がない
        }
        画像.src = 画像ＵＲＬ;
    }

        画像.onload = function() {
            // 画像のサイズを指定
            画像.width =  200;
            画像.height = 100;
        }

        画像.onload = function() {
            画像.width =  200;
            画像.height = 150;
            // img 領域での画像まわりの空白を指定
            画像.style.padding = "50px 20px 100px 80px";  // 上、右、下、左の順
        }

例４：canvasへの表示（画像にcanvasサイズを合わせる）

<script>
function 例４(画像ＵＲＬ, キャンバス名) {
    // canvas要素のオブジェクトを取得
    var canvas = document.getElementById(キャンバス名);
    var ctx = canvas.getContext("2d");
    // 画像の表示
    var 画像 = new Image();
    画像.onload = function() {
        // キャンバスのサイズを決める
        canvas.width = 画像.width;
        canvas.height = 画像.height;
        // 画像をキャンバスに表示する（0,0 は必要。左上の味）
        ctx.drawImage(画像, 0, 0);
    }
    画像.src = 画像ＵＲＬ;
}
</script>

例４

<canvas id="例４キャンバス"></canvas>

例５：canvasへの表示（canvasサイズを固定して画像位置を指定）

画像の一部をキャンバスの指定場所に表示します。
その位置関係は図を参照してください。単位は px（ピクセル）

ここでは、画像のサイズは 200x150、キャンバスのサイズは 400x300 です。画像の右半分をキャンパスの適当な部分に（縦横比を無視して）表示します。

<script>
function 例５(画像ＵＲＬ, キャンバス名) {
    // canvas要素のオブジェクトを取得
    var canvas = document.getElementById(キャンバス名);
    var ctx = canvas.getContext("2d");
    // 画像の表示
    var 画像 = new Image();
    画像.onload = function() {
        ctx.drawImage(画像,
          100,   0,  // sx, sy, 必須
          100, 150,  // sw, sh, 省略時：画像.width,画像.height
          100,  50,  // dx, dy, 省略時：0,0
          200, 100   // dw, dh  省略時：画像.width,画像.height
        );
    }
    画像.src = 画像ＵＲＬ;
}
</script>

例５

<canvas id="例５キャンバス"></canvas>

例５テスト：例５の演習

上図の各値を与えて、どのような表示になるのかを演習します。画像の縦横比を保つ場合には、sw/sh = dw/dh にします。

sx= sy= sw= sh= dx= dy= dw= dh= 例５テスト