JavaScript（Webブラウザ）の画像ファイル読み込み

Webブラウザ内のJavaScriptでは、canvas要素の画像を画像データ（ImageData）として取得することができました。

canvas要素には、img要素を描くことができますから、ローカルファイルの画像をimg要素に読み込むことができれば、読み込んだ画像をcanvas要素に描いてJavaScriptから取得できることになります。

通常img要素ではsrc属性に直接画像パスを指定しますが、この方式ではユーザーが任意の画像（ローカルファイル）を読み込ませることができません。

JavaScriptを使うと、「ユーザーが選択したローカルファイル」をFileオブジェクトとして取得し、さらにFileオブジェクトから「img要素のsrc属性に指定できるURL」を作成することができます。

後はimg要素のsrc属性にURLを設定して画像が読み込まれるのを待てば、画像を読み込んだimg要素の出来上がり。img要素をcanvasに描くことで、「JavaScriptで処理できる画像データ」も手に入るわけですね。

まずはWebブラウザ上で画像ファイルを指定し、その画像ファイルをurl化して読み込んでみましょう。

ローカルファイルからURLを作る

input要素のtype属性に「file」を指定すると、ローカルファイルを選択するダイアログを出すことができます。選択結果は、input要素のfiles属性でFileList（Fileオブジェクトのリスト）としてアクセスできるので、単一のファイル選択なら「files[0]」としてアクセス可能です。

選択されたローカルファイルのFileオブジェクトをURL.createObjectURL()に渡すと、URLを作成することができます。そのURLをimg要素のsrc属性に設定すれば画像が読み込まれるので、読み込み完了を待ってJavaScriptから操作してみましょう。

読み込みが完了したら、作成したURLをURL.revokeObjectURL()に渡して解放しておきます。

画像ファイルを選択すると、img要素に読み込んでサイズ（width/height）を表示します。

input要素とimg要素、JavaScriptのコードは以下の通りです。

<img id="image_view">
<p><input type="file" accept="image/*" id="file_selector"></p>

<script>
function onLoad() {

    let selector = document.getElementById('file_selector');
    selector.addEventListener('change', onSelectorChange);

}

function onSelectorChange() {

    let selector = document.getElementById('file_selector');
    let url = URL.createObjectURL(selector.files[0]);

    let image = document.getElementById('image_view');

    image.addEventListener('load', onImageLoad);
    image.src = url;

}

function onImageLoad() {

    let image = document.getElementById('image_view');

    URL.revokeObjectURL(image.src);

    alert(image.width + "*" + image.height);

}

document.addEventListener('DOMContentLoaded', onLoad);
</script>

創作プログラミングの街