画像ファイルを読み込む－JavaScript入門（HTML5編）

HOME
JavaScript入門[HTML5編]
画像ファイルを読み込む

これまで、テキストファイルの読み込み方法を見てきましたが、今度は画像ファイルの読み込みを見ていきましょう。画像ファイル等はdataURL形式で読み込むと扱いが簡単になります。

画像ファイルの読み込みサンプルスクリプト

ここでは、画像データをURL文字列（dataURL）に変換して読み込む方法を見ていきます。 urlは普通ネットワーク上のアドレスを表しますが、画像データなども文字列の形で格納することができるのです。

FileReader.readAsDataURL(Fileオブジェクト): ファイルデータをFileReaderにdataURL形式で読み込みます。

以下のサンプルでは、ファイル選択ダイアログで指定した画像ファイルを、divタグ内に書き出します。ご自身のPCにある画像ファイルを指定してみて下さい。またテキストエリアにはdataURLを表示させるので、どんなものかご確認下さい。

＜サンプル＞

上記サンプルのスクリプトは以下の通りです。

<input type="file" id="selfile"><br>
<textarea id="dturl" readonly></textarea>
<div id="bg"></div>

<style type="text/css">
textarea{ width:100%; height:100px; margin:10px 0px }
div#bg{ width:360px;  height:240px; border:1px solid black; overflow:auto }
</style>

<script>
var obj1 = document.getElementById("selfile");

obj1.addEventListener("change", function(evt){
  var file = evt.target.files;
  var reader = new FileReader();
  
  //dataURL形式でファイルを読み込む
  reader.readAsDataURL(file[0]);
  
  //ファイルの読込が終了した時の処理
  reader.onload = function(){
    var dataUrl = reader.result;

    //読み込んだ画像とdataURLを書き出す
    document.getElementById("bg").innerHTML = "<img src='" + dataUrl + "'>";
    document.getElementById("dturl").value = dataUrl;
  }
},false);
</script>

サンプルスクリプトの説明

では上記のサンプルスクリプトを詳しく見ていきましょう。

HTML部分

<input type="file" id="selfile"><br>
<textarea id="dturl" readonly></textarea>
<div id="bg"></div>

ファイル選択のボタンと、dataURLを表示するテキストエリア、選択画像を表示するdivタグを設置しています。それぞれにid名「selfile」，「dturl」，「bg」を付けました。テキストエリアは編集を禁止するreadonlyを付けています。

CSS部分

<style type="text/css">
textarea{ width:100%; height:100px; margin:10px 0px }
div#bg{ width:360px;  height:240px; border:1px solid black; overflow:auto }
</style>

続いてスタイルシート部分です。最初はテキストエリアのスタイルを指定しています。幅100％，高さ100px，余白を上下10px,左右0pxとしました。

次にid名「bg」が付いたdivタグにスタイルを指定しています。幅360px，高さ240px，黒の枠線を付けました。また画像が枠をとび出すときにはスクロールバーを表示するようにしました。

ファイルが選択された時

var obj1 = document.getElementById("selfile");

obj1.addEventListener("change", function(evt){ …処理… },false);

ここからスクリプト内部を見ていきます。まずファイルを選択するinputタグをgetElementById()で取得して変数obj1に格納しています。そしてaddEventListener()を使ってchangeイベントを追加します。

dataURL形式で読み込む

var file = evt.target.files;
var reader = new FileReader();
reader.readAsDataURL(file[0]);

changeイベントの最初に、event.target.filesで選択されたファイルを取得し、変数fileに格納します。

続いてFileReaderを作成し、変数readerに格納しています。

そしてreadAsDataURL()を使って、画像ファイルをdataURL形式でFileReaderに読み込みます。変数fileは配列の形式だったので、配列の最初の要素（file[0]）をreadAsDataURLのカッコ内に指定します。

ファイルの読込が完了した時の処理

reader.onload = function(){
  var dataUrl = reader.result;

    document.getElementById("bg").innerHTML = "<img src='" + dataUrl + "'>";
    document.getElementById("dturl").value = dataUrl;
}

ファイル読込が完了した時（つまりonloadイベント内で）、FileReaderに読み込んだデータをreader.resultで取得します。それを変数dataUrlに格納します。

そして、divタグに画像タグをinnerHTMLで書き出しています。src属性値に取得したdataURLを指定しています。

またテキストエリアにはdataURLそのものを書き出すようにしました。「data:image/ファイル形式;base64,」の後に画像データが長い文字列として表示されます。

前へ次へ