スタートページJavascript

画像の読込表示

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

ここでは通常のjavascriptの範囲で作成していますが、jQuery を利用すると、多様な画面処理が比較的容易に記述できます。それに関しては、「jQueryの基礎」を参照してください。


例1:スクリプトで画像URLや表示場所を指定

 この下に”例1画像表示場所”があります。

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

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

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


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

例1で、「画像.src」が画像ファイルのURL、<img src="~">の"~"であることが類推されます。
このように、読み込んだ画像ファイルの内容を知ることができます。

<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('image1.jpeg', '例2表示場所')">例3</button>
<div id="例2表示場所"></div>   <-- オ -->

例3:FORMで画像URL、表示場所、imgのwidthを指定

例2で画像のwidthを知ることができましたが、逆に画像の表示widthを指定することができます。
<img>に記述があっても無視されます。下の例では200→100

URL: 表示場所: IMG幅(変更できます):
<script>
    function 例3(画像URL, 画像表示場所) {
        var 画像 = document.getElementById(画像表示場所);
        画像.onload = function() {
            画像.width = IMG幅;
        }
        画像.src = 画像URL;
    }
</script>

<form>
URL:<input type="text" name="画像URL" value="image1.jpeg" size="20"></input>
表示場所:<input type="text" name="画像表示場所" value="例3画像表示場所" size="50"></input>
IMG幅(変更できます):<input type="text" name="IMG幅" value="100" size="2"></input>
<input type="button" value="例2"
    onClick="例2(this.form.画像URL.value, this.form.画像表示場所.value, this.form.IMG幅.value)">
</input>
</form>
<img id="例3画像表示場所" width=200>

例4:<img>のサイズに合わせた画像の圧縮(<img>サイズの変更)

<img width="300" height="100">のようにwidthとheightの両方を指定すると、画像の縦横比が300:100以外の場合は縦長・横長に変形してしまいます。
ここでは、画像の縦横比を保ちつつ<img>で指定した矩形に収まるように表示します(画像の縦横比により<img>のサイズを変更します。


<script>
    function 例4(画像URL, 表示場所) {
        // img記述のサイズ取得
        var IMG = document.getElementById(表示場所);
        var IMG幅 = IMG.width;
        var IMG高 = IMG.height;
        // 画像オブジェクト
        var 画像 = new Image();
        // 画像読込後の処理
        画像.onload = function() {
            IMG.src = 画像URL;
            // 画像サイズ取得
            var  画像幅 = 画像.width;
            var  画像高 = 画像.height;
            // 画像の圧縮
            var IMG縦横比 = IMG高 / IMG幅;
            var 縦横比 = 画像高 / 画像幅;  // 縦横比≦IMG縦横比→横長→IMGの横幅がネックに
            if (縦横比 <= IMG縦横比) {   // 横長のとき
                var 圧縮後画像幅 = IMG幅;
                var 圧縮率 = IMG幅 / 画像幅;
                var 圧縮後画像高 = 圧縮率 * 画像高;
            }
            else {               // 縦長のとき
                圧縮後画像高 = IMG高;
                圧縮率 = IMG高 / 画像高;
                圧縮後画像幅 = 圧縮率 * 画像幅;
            }
            // imgサイズ変更
            IMG.width = 圧縮後画像幅;
            IMG.height = 圧縮後画像高;
        }
        // 画像読込
        画像.src = 画像URL;
    }
</script>

<button onClick="例4('image1.jpeg', '例4画像表示場所')">例4</button>
<img id="例4画像表示場所" width=300 height=100>

例5:<img>内の画像表示位置の指定(<img>サイズは保持)

例4では、<img>サイズが変化してしまいましたが、縦横比の異なる複数の画像を並べて表示するような場合、<img>のサイズは固定し、その中で画像表示したい、しかも中央揃えや下揃えなどもしたいことがあります。

上の赤い枠は<img>の範囲(300,200)で、ここでは画像を中央下揃えに表示しています。
このような処理はscriptだけでは実現できず、CSS(style)を用いる必要があります。
そのstyleを右に示します。

<:img>でwidthやheightを指定しても、styleでの指定で変わるので無効になります。

<style>
.rei5 {                      /* クラス名 */
  width: 300px;              /* IMG幅 */
  height: 200px;             /* IMG高 */
  position: relative;
  border: 1px solid red;     /* imgの枠を示すためのもので実際には不要 */
}

.rei5 img {
  position: absolute;
  display: block;
  width: 200px;             /* 圧縮後画像幅 */
  height: 150px;            /* 圧縮後画像高 */
  top: 1;                   /* 1のとき余白が上→画像は下揃え */
  right: 0;                 /* 1のとき余白が上→画像は下揃え */
  bottom: 0;                /* 1のとき余白が上→画像は下揃え */
  left: 0;                  /* 1のとき余白が上→画像は下揃え */
  margin: auto;
}</style>

<div class="rei5"><img src="image1.jpeg"></div>

これを関数にしましょう。例4のように、縦横比によりimgの範囲で最大になるよう圧縮・拡大します。

単純にいえば、このstyleをscriptで生成すればよいのです。


例5('image1.jpeg', '例5画像表示場所', '右', '上', '例5', '例5スタイル生成場所') →画像が縦長なら右揃え、横長なら上揃え
<img id="例5画像表示場所" width=200 height=250> →「width,heightは無効」だといいましたが、ここではこの値をstyle生成に使うので必要です。

<script>
    function 例5(画像URL, 表示場所, 横位置, 縦位置, クラス名, スタイル生成場所) {
        // img記述のサイズ取得
        var IMG = document.getElementById(表示場所);
        var IMG幅 = IMG.width;
        var IMG高 = IMG.height;
        // 画像オブジェクト
        var 画像 = new Image();
        // 画像読込後の処理
        画像.onload = function() {
            IMG.src = 画像URL;
            // 画像サイズ取得
            var  画像幅 = 画像.width;
            var  画像高 = 画像.height;

            // 画像の圧縮
            var IMG縦横比 = IMG高 / IMG幅;
            var 縦横比 = 画像高 / 画像幅;  // 縦横比≦IMG縦横比→横長→IMGの横幅がネックに
            if (縦横比 <= IMG縦横比) {   // 横長のとき
                var 圧縮後画像幅 = IMG幅;
                var 圧縮率 = IMG幅 / 画像幅;
                var 圧縮後画像高 = 圧縮率 * 画像高;
            }
            else {               // 縦長のとき
                圧縮後画像高 = IMG高;
                圧縮率 = IMG高 / 画像高;
                圧縮後画像幅 = 圧縮率 * 画像幅;
            }
            // スタイルの作成   例4の「imgサイズ変更」を削除、この部分を追加(styleをスタイル生成場所に作成)
            var スタイル内容
                = "<style>"
                + "." + クラス名 + " {"
                + "  width: " + IMG幅 + "px;"
                + "  height: " + IMG高 + "px;"
                + "  position: relative;"
                + "}"
                + "." + クラス名 + " img {"
                + "  position: absolute;"
                + "  display: block;"
                + "  width: " + 圧縮後画像幅 + "px;"
                + "  height:" +  圧縮後画像高 + "px;";
            if (横位置 == "右")  スタイル内容 += "  right: 0; left: 1;";
            else if (横位置 == "左")  スタイル内容 += "  right: 1; left: 0;";
            else スタイル内容 += "  right: 0; left: 0;";
            if (縦位置 == "上")  スタイル内容 += "  top: 0; bottom: 1;";
            else if (縦位置 == "下")  スタイル内容 += "  top: 1; bottom: 0;";
            else スタイル内容 += "  top: 0; bottom: 0;";
            スタイル内容 += "  margin: auto;"
                + " }"
                + " </style>";
            document.getElementById(スタイル生成場所).innerHTML = スタイル内容;
        }
        // 画像読込
        画像.src = 画像URL;
    }
</script>

<button onClick="例5('image1.jpeg', '例5画像表示場所', '右', '上', '例5', '例5スタイル生成場所')">例5</button>
<div class="例5"><img id="例5画像表示場所" width=200 height=250></div>   上図の赤枠サイズを指定
<div id="例5スタイル生成場所"></div>  ここにstyleが生成されるがリストは表示されない
横位置、縦位置
横位置と縦位置でimgで指定した枠のなかで画像の表示位置を指定します。
  横位置:"左", "中", "右"   縦位置:"上", "中", "下"
クラス名とスタイル生成場所
この処理は、style(CSS)での指定が必要であり、それをscriptで生成しています。
指定したクラス名(任意の文字列でよい)のstyleをスタイル生成場所に生成します。これは表示されません。
クラス名とスタイル生成場所は、「使い捨て」ですが、他と重複しない必要があります。
<img>の記述
一般形は、<div class="クラス名"><img id="表示場所" width=xxx height=xxx></div> です。
imgタグはdivやpなどのタグで囲まなければなりません。
width と height が必須です。

例6:表示してある画像の情報取得

HTMLに表示されている画像のURL、サイズなどを得て表示します。


<script>
    function 例6(対象画像, 表示場所) {
        var 画像 = document.getElementById(対象画像);    // A
        var 画像src = 画像.src;                          // B
        var 画像width = 画像.width;
        var 画像height = 画像.height;

        var 表示内容 = "画像src = " + 画像src + "<br>"
                     + "画像width = " + 画像width + "<br>"
                     + "画像height = " + 画像height + "<br>";
        document.getElementById(表示場所).innerHTML = 表示内容;
    }
</script>

<button  onclick='例6("例6画像", "例6表示場所")'>例6</button></p>
<div id="例6表示場所"></div>

例7:画像の拡大(同一位置)

画像をクリックすると、拡大されます。

<script>
   function 例7(対象画像) {
        var 画像 = document.getElementById(対象画像);
        画像.width = 200;                     // A
    }
</script>

<p><input type="image" id="例7画像"          <!-- B -->
    src="image1.jpeg" alt="" width = "100"   <!-- C -->
    onClick='例7("例7画像")'>                <!-- D -->
</input></p>

例8:画像の拡大(他の位置に表示)

サムネイルのアルバムのように、画像にマウスを重ねると、拡大画像が下に表示されます。

<script>
   function 例8(対象画像, 表示場所, 倍率) {                 // A
        var 元画像 = document.getElementById(対象画像);      // B
        var 拡大画像 = document.getElementById(表示場所);    // C
        拡大画像.src = 元画像.src;                           // D
        拡大画像.width = 元画像.width * 倍率;                // E
    }
</script>

<input type="image" id="例8画像1"
    src="image1.jpeg" alt="" width = "100"
    onMouseOver='例8("例8画像1", "例8拡大画像表示場所", 2)'> <!-- F -->
</input>
    <!--  : 例8画像2(image2.jpeg)について同様な記述 -->
<div><img id="例8拡大画像表示場所"></div>                         <!-- G -->