【Javascript】ブラウザで画像処理その1『ファイルを表示しよう！』

『画像処理』というとやたらと重たい処理でデスクトップアプリで行うイメージを持ちがちですが、最近ではブラウザの性能も向上して、Javascriptで画像処理をしても速度的に問題なくなってきました。（デスクトップアプリと比べれば遅いですが）

そんなわけで、ブラウザで画像処理をしてみましょう。

本記事ではブラウザでファイルを選択して画像を表示する方法について紹介します。

【Javascript】ブラウザで画像処理その2『画像データを読み取ろう！』

【Javascript】ブラウザで画像処理その3『簡単な画像処理をしてみよう！』

ファイルを選択する仕組みを作る
選択されたファイルを表示する
大きな画像への考慮
次回予告

ファイルを選択する仕組みを作る

まず始めに、ブラウザでファイルを選択する仕組みをHTMLで作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>ブラウザで画像処理しよう！</title>
</head>
<body>
    <input type="file" class="inputFile">
</body>
</html>

<!DOCTYPE html>

<head>

<title>ブラウザで画像処理しよう！</title>

</head>

<body>

</body>

</html>

仕組みといっても、bodyタグ内に上記のinputタグが存在していれば良いです。

上記のコードをメモ帳などに貼り付けて、拡張子（.html）で保存後にブラウザで表示すると、以下のようなファイルを選択するボタンが表示されます。

「ファイルを選択」ボタンを押下するとファイル選択画面が表示されるので、適当なファイルを選択することで、ボタン右側に選択したファイル名が表示されるようになります。

選択されたファイルを表示する

続いて、inputタグで選択されたファイルを認識してブラウザに表示します。

処理はJavascriptで記述しますが、色々と便利なのでjQueryを使って行います。（ここではCDN版のjQueryを使います）

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>ブラウザで画像処理しよう！</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        // ここに処理を書いていきます
    </script>
</head>
<body>
    <input type="file" class="inputFile"><br />
    <img class="showImage">
</body>
</html>

<!DOCTYPE html>

<head>

<title>ブラウザで画像処理しよう！</title>

// ここに処理を書いていきます

</script>

</head>

<body>

</body>

</html>

画像を表示するまでの処理の流れとしては、ページのロード完了後にinputタグの変更イベントを登録して、そのイベントの中で画像を表示する処理を実行します。

// ロード完了後
$(function()
{
    // inputタグの変更イベント
    $('.inputFile').on("change", function()
    {
        // 選択されたファイル情報
        file = this.files[0];
        // 対応ファイルフォーマットリスト
        permit_type = ["image/jpeg", "image/png", "image/gif"];
        // 対応ファイルではない場合
        if(file && permit_type.indexOf(file.type) == -1)
        {
            // アラートを表示
            alert("未対応のファイルです。");
            // ファイル名をクリアする
            $(this).val("");
            // 処理終了
            return ;
        }
        // ファイル読み込みオブジェクト
        reader = new FileReader();
        // ファイルのロードが完了した場合のコールバック
        reader.onload = function()
        {
            // 表示用画像に設定
            $('.showImage').attr("src", reader.result);
        };
        // ファイルのロード
        reader.readAsDataURL(file);
    });
});

// ロード完了後

$(function()

{

// inputタグの変更イベント

$('.inputFile').on("change", function()

{

// 選択されたファイル情報

file = this.files[0];

// 対応ファイルフォーマットリスト

permit_type = ["image/jpeg", "image/png", "image/gif"];

// 対応ファイルではない場合

if(file && permit_type.indexOf(file.type) == -1)

{

// アラートを表示

alert("未対応のファイルです。");

// ファイル名をクリアする

$(this).val("");

// 処理終了

return ;

}

// ファイル読み込みオブジェクト

reader = new FileReader();

// ファイルのロードが完了した場合のコールバック

reader.onload = function()

{

// 表示用画像に設定

$('.showImage').attr("src", reader.result);

};

// ファイルのロード

reader.readAsDataURL(file);

});

少しソースは長いですが、やっていることは大したことないのでコメントを読みながら理解を進めてみてください。

「ファイルを選択」ボタンからファイルを選択すると、以下のようにボタンの下に画像が表示されるようになります。

大きな画像への考慮

本記事での目的は上記までのコードでOKですが、サイズの大きな画像を読み込んだ場合には、実サイズで表示されてしまうため見切れてしまいます。

そこで、画像がブラウザから見切れないように表示される画像の最大サイズを指定します。

<head>
    <title>ブラウザで画像処理しよう！</title>
    <style>
        .showImage
        {
            max-width: 90vw;  /* 最大幅を画面幅の90%に指定 */
            max-height: 90vw; /* 最大たかさを画面高さの90%に指定 */
        }
    </style>
    〜〜〜〜
</head>