複数のcanvasにそれぞれ異なる画像を読み込ませて表示させたい

###前提・実現したいこと
複数のcanvasにそれぞれ異なる画像を読み込ませて表示させたいと思っています。
例えば、
一つ目の<input id='fileSelectA' type='file' accept='image/*' />
から読み込んだ画像は"canvasA"に表示、
二つ目の<input id='fileSelectB' type='file' accept='image/*' />
から読み込んだ画像は"canvasB"に表示、
三つ目の…（以下略）
というように表示したいのですが、上手くできません。
全くの初心者で申し訳ありません。
よろしくお願いします。

###該当のソースコード

html
1    <input id='fileSelect' type='file' accept='image/*' />
2    <input id='fileSelect2' type='file' accept='image/*' />
3        <div style="position: relative;">
4            <canvas id='canvasA' width='640' height='460' style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
5        </div>
6        <div style="position: relative;">
7            <canvas id='canvasB' width='640' height='460' style="position: absolute; left: 0; top: 30; z-index: 1;"></canvas>
8        </div>

Javascript
1function loadImg(e){
2    var file = e.target.files[0];
3    var imgA = new FileReader();
4    imgA.onload = function(e){
5    var imgB = new Image();
6		imgB.onload = function(){
7			var ctx = document.getElementById('canvasA').getContext('2d');
8    		ctx.drawImage(imgB, 0, 0, 640, 480);
9		};
10		imgB.src = e.target.result;
11	};
12	imgA.readAsDataURL(file);
13}
14function loadImg(e){
15    var file = e.target.files[0];
16    var imgA = new FileReader();
17    imgA.onload = function(e){
18    var imgB = new Image();
19		imgB.onload = function(){
20			var ctx = document.getElementById('canvasB').getContext('2d');
21    		ctx.drawImage(imgB, 0, 0, 640, 480);
22		};
23		imgB.src = e.target.result;
24	};
25	imgA.readAsDataURL(file);
26}
27
28
29$(function(){
30	document.getElementById('fileSelect').addEventListener('change', loadImg, false);
31    document.getElementById('fileSelect2').addEventListener('change', loadImg, false);
32});

kei344

2016/11/26 16:13

「上手くできません」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

よくわかりませが、こんな感じでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
5  <title>Test</title>
6<script>
7$(document).ready(function(){
8	$(".file").change(function() {
9		var inputFiles = this.files;
10		if(inputFiles == undefined || inputFiles.length == 0) return;
11		
12		var reg=new RegExp("\\d+$","g");
13		var num=reg.exec(this.id);
14		
15		var reader = new FileReader();
16		reader.addEventListener('load', function(){
17			var img=$(new Image());
18			img.load(function(){
19			    var canvas = document.getElementById("canvas"+num);
20			    var c = canvas.getContext("2d");
21			    c.drawImage(this, 0, 0, canvas.width, canvas.height);
22			});
23			img.attr("src",reader.result);
24		})
25		reader.readAsDataURL(inputFiles[0]);
26	});
27});
28</script>
29  </head>
30  <body>
31	<canvas class="canvas" id="canvas1" ></canvas>
32	<input class="file" id="file1" type="file" />
33	<canvas class="canvas" id="canvas2" ></canvas>
34	<input class="file" id="file2" type="file" />
35  </body>
36</html>
37