Edited at

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に画像が表示されます


参考

https://tech-blog.s-yoshiki.com/2018/01/10/