File APIでローカルから取得した画像をcanvas上に表示する

File APIでローカルから画像を選択して、取得した画像をcanvas上に表示する流れを実装してみたのでメモ。

サンプルコード

HTML

<canvas id="canvas"></canvas>
<div><input type="file" name="select" id="select" /></div>

JavaScript

var canvas;
var canvasW = 480;
var canvasH = 270;
var ctx;
var select;
var localImg;

window.onload = function() {
	init();
}

function init() {
	select = document.getElementById('select');
	canvas = document.getElementById('canvas');

	// input fileがあるか確認
	if(!select) {
		return false;
	};
	// canvasがあるかどうかとcanvasに対応したブラウザかを確認
	if(!canvas || !canvas.getContext) {
		select.style.display = "none";
		return false;
	};
	canvas.width = canvasW;
	canvas.height = canvasH;
	ctx = canvas.getContext('2d');
	// File APIに対応しているか確認
	if(!window.File) {
		return false;
	}

	// ファイルが選択されたとき
	select.addEventListener('change', function(e) {
		// 選択されたファイルの情報を取得
		var fileData = e.target.files[0];
		var imgType = fileData.type;

		// 選択されたファイルが画像かどうか確認
		if(!imgType.match(/^image/)) {
			alert('画像を選択してください');
			select.value = '';
			return;
		}

		var reader = new FileReader();
		// ファイル読み取りに失敗したとき
		reader.onerror = function() {
			alert('ファイル読み取りに失敗しました')
		}
		// ファイル読み取りに成功したとき
		reader.onload = function() {
			localImg = reader.result;
			draw();
		}
		// ファイル読み取りを実行
		reader.readAsDataURL(fileData);
	}, false);
}

function draw() {
	// canvas内の要素をクリアする
	ctx.clearRect(0, 0, canvasW, canvasH);
	
	var img = new Image();
	img.src = localImg;
	img.onload = function() {
		// 画像をcanvas内に収まるようにサイズ調整
		canvasW / canvasH
		this.width / this.height
		if(this.width / this.height > canvasW / canvasH) {
			// 幅に合わせて画像サイズ設定
			var imgWidth = canvasW;
			var imgHeight = Math.floor(this.height * (canvasW / this.width));
		} else {
			// 高さに合わせて画像サイズ設定
			imgHeight = canvasH;
			imgWidth = Math.floor(this.width * (canvasH / this.height));
		}

		ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
	}
}

ローカルから取得した画像をcanvas上に表示するデモページ
　

【参考サイト】

• クライアント側でcanvasを使って画像をリサイズする – Qiita