ツナドーナツ・技術メモ帳

色々なものを作る過程で分からなかったことなどを書いていきます

トップ > JavaScript > JavaScriptでローカルの画像を読み込んで表示する方法

JavaScriptでローカルの画像を読み込んで表示する方法

JavaScript

僕がよく使っていた、JavaScriptで画像処理のやり方を紹介していたサイトが消えてしまったので自分で調べて作ってみることにしました。
こういう感じで表示させます。
f:id:iwanax:20180114182001g:plain
inputタグを使って読み込んだファイルをcanvasに表示する方法です

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>ファイル読み込み</title>
</head>
<body>
	<canvas id="canvas"></canvas>
	<input type="file" id="self">
	<script>
	//キャンバスタグ読み込み
	var canvas = document.getElementById("canvas");
	//描画機能を有効にする
	var ctx = canvas.getContext('2d');
	//inputタグの読み込み
	var src = document.getElementById("self");

	//inputが変更されたときのイベントを登録
	src.addEventListener('change', function(event){
		//選択ファイルを配列形式で取得
		var file = event.target.files;
		//ファイルリーダー
		var reader = new FileReader();

		//ファイルを読み込む
		reader.readAsDataURL(file[0]);

		//ファイルを読み込んだときの処理
		reader.onload = function(){
			//画像オブジェクト作成
			var img = new Image();
			//画像ソースを入れる
			img.src = reader.result;
			//画像の表示
			img.onload = function(){
				canvas.width = img.width;
				canvas.height = img.height;
				ctx.drawImage(img, 0, 0);
			}
		}
	}, false);
	</script>
</body>
</html>