スタートページJavascript

画像の読込表示

画像ファイルのURLを与えて画像を読み込み、指定場所に表示する方法です。ここで扱う画像の容量は小さく読込時間への考慮はしないことにします。


img領域への画像表示


例1:img への画像表示

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

<script>
    function 例1() {
        var 画像 = document.getElementById("例1画像表示場所"); // ア
        画像.onload = function() {                              // イ
            // 画像読込後の処理  例:画像.width = 200;
        }                                                       // ウ
        画像.src = "picture/image1.jpeg";                               // エ
    }
</script>

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

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

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

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

    function 例1() {
        document.getElementById("例1画像表示場所").width  = 300;
        document.getElementById("例1画像表示場所").height = 300;
        var 画像 = document.getElementById("例1画像表示場所");
を加えると、img のサイズが変わり、そのサイズいっぱいに画像が拡大」・縮小します。
これでは画像の縦横比が崩れますが、.width、.height の一方を与えると自動的に縦横比を維持するよう調整されます。


例2:画像ファイルの情報取得

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

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

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

例2A:画像処理後処理の外だし

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

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

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

(結果は上の例2と同じ場所に表示されます)

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

画像を1.5倍拡大して表示します。

    function 例2B(画像URL, 画像表示場所) {
        var 画像 = document.getElementById("例1画像表示場所");
        画像.onload = function() {
            document.getElementById(画像表示場所).width  = 画像.width  * 1.5;
            document.getElementById(画像表示場所).height = 画像.height * 1.5; // 一方だけにする
        }
        画像.src = 画像URL;
    }


例3:サイズが与えてある img に画像を表示

↓img境界(この下に、<img id="例3画像表示場所" width="300" height="300"> があります)
←img境界
↑img境界

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

img のサイズ全体に画像が(縦横比を崩して)表示されます。

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

img のサイズ全体に指定した画像サイズに変わります。

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

↓img境界(この下に、<img id="例3B画像表示場所" width="300" height="300"> があります)
←img境界
↑img境界


CANVASへの画像表示


例4:canvasへの表示(画像にcanvasサイズを合わせる)

<script>
function 例4(画像URL, キャンバス名) {
    // 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 = 画像URL;
}
</script>

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


例5:canvasへの表示(canvasサイズを固定して画像位置を指定)

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

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

<script> function 例5(画像URL, キャンバス名) { // 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 = 画像URL; } </script>

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

例5テスト:例5の演習

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

sx= sy= sw= sh= dx= dy= dw= dh=


getImageCanvas(画像URL, キャンバス名[, 横位置, 縦位置, 背景色]);

例5を関数にしたものです。画像ファイルを縦横比を保ちつつcanvasいっぱいに表示します。サムネイルの作成などに便利です。
<canvas>にwidth, heightは必須

getImageCanvas(画像URL, CANVAS名); オプションなしの場合

画像の縦横比を保ちつつキャンバスいっぱいに表示します。このときキャンバスの横・縦に余裕が生じたとき、キャンバスのサイズを変えます。

ケース1

<canvas id="GIcanvas11" width="300" height="300"></canvas>

canvasのwidth=300がネックになりheight=300x300/400=225になります。

ケース2

<canvas id="GIcanvas12" width="300" height="300"></canvas>

canvasのheight=300がネックになりwidth=480x300/640=225になります。

getImageCanvas(画像URL, CANVAS名, 横位置, 縦位置, 背景色); オプションありの場合

<canvas>にwidth, heightが必須です。canvasのサイズは変えず、画像を縦位置:上・中・下、横位置:左・中・右に表示。余白部を残します。
サムネイルのように同一サイズのキャンバスが並んでおり、横長画像は下詰、縦長画像は中央に表示する場合、画像に関係なく、横位置を中、縦位置を下とします。

ケース1
横長画像:圧縮された全体が下に表示され、上に空白ができる('右'は無視される)。背景色はgray
ケース2
縦長画像:圧縮された全体が中央に表示され、左右に空白ができる('上'は無視される)。背景色はyellow
ケース3: 画像 横位置 縦位置

この下に<canvas id="GIcanvas2" width="300" height="300"></canvas>があります。

(上と同じ)