File APIを使ってJavaScriptで画像を読み込む。canvasを使って画像を出力

こちらに移行しました。→ 「FileAPIで画像を読み込み → canvasに描画」 (2018/11/24)

概要

JavaScriptとHTMLを使って画像を『読み込む』&『書き出す』という簡単なコードを記述します。
canvasとFile APIを使用します。
必要なものはhtmlとjsファイルとcanvasに対応したブラウザだけです。

画像の読み込み

HTMLサイド

index.html

<input type="file" id="selfile">

JavaScriptサイド

.js

var dataUrl;
var objFile = document.getElementById("selfile");
objFile.addEventListener("change", function(evt) {
    var file = evt.target.files;
    var reader = new FileReader();
    reader.readAsDataURL(file[0]);
    reader.onload = function() {
        dataUrl = reader.result;
    };
}, false);

dataUrlにはURL(文字列)が代入されます。

画像の出力

.js

document.getElementById("xxx").innerHTML="<img src='"+dataUrl+"' alt='none'>";
/*xxxは任意のHTMLタグ*/

画像ファイルを読み込んだ後に実行します。
imgタグとして任意のタグの中に出力します。

注意
画像のサイズが大きくなると、読み込む時間が大きくなるため、これを考慮した関数を書く必要があります。

Canvasを使って画像を出力

HTMLサイド

index.html

<canvas id="canvas">
画像を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>

JavaScriptサイド

.js

function main() {
    var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
        var context = canvas.getContext('2d');
        var image = new Image();
        image.src = dataUrl;
        canvas.width = image.width;
        canvas.height = image.height;
        context.drawImage(image, 0, 0);
    }
}

main()が実行されるとcanvasに画像が表示されます

参考