在2个不同的画布上显示捕获或浏览的图像

Question

我正在尝试用两个画布制作表单，我需要两个画布绘制用手机捕获的两个不同图像，然后通过邮件发送。

该表单有效，但是我无法绘制两个图像。

它仅显示第一个。第二个保持空白。

它在http://juanervas.com/juanervas.com/osh/test.html

我想念什么？

谢谢！

<label for="name2">CAPTURE1:</label>
<br/>
<div class="upload-btn-wrapper">
<input type="file" name="image" accept="image/*" capture="camera" required >
<canvas id="cap1" width="210" height="135" style="border:1px solid #d3d3d3;"></canvas>
<script>
var input = document.querySelector('input[type=file]'); 
input.onchange = function () {
var file = input.files[0];

drawOnCanvas(file);   

};

function upload(file) {
var form = new FormData(),
xhr = new XMLHttpRequest();

form.append('image', file);
xhr.open('post', 'server.php', true);
xhr.send(form);
}

function drawOnCanvas(file) {
var reader = new FileReader();
reader.onload = function (e) {
var dataURL = e.target.result,
c = document.querySelector('canvas'), 
ctx = c.getContext('2d'),
img = new Image();

img.onload = function() {
c.width = 210;
c.height = 135;
ctx.drawImage(img, 5, 5, 200, 125);
};

img.src = dataURL;
};

reader.readAsDataURL(file);
}

function displayAsImage(file) {
var imgURL = URL.createObjectURL(file),
img = document.createElement('img');

img.onload = function() {
URL.revokeObjectURL(imgURL);
};

img.src = imgURL;
document.body.appendChild(img);
}
</script>
</div>

<label for="name">CAPTURE2:</label>
<br/>
<div class="upload-btn-wrapper">

<input type="file" name="image2" accept="image/*" capture="camera" required > 
<canvas id="cap2" width="210" height="135" style="border:1px solid #d3d3d3;"></canvas>

<script>
var input = document.querySelector('input[type=file]'); 
input.onchange = function () {
var file = input.files[0];

drawOnCanvas(file);   

};

function upload(file) {
var form = new FormData(),
xhr = new XMLHttpRequest();

form.append('image2', file);
xhr.open('post', 'server.php', true);
xhr.send(form);
}

function drawOnCanvas(file) {
var reader = new FileReader();
reader.onload = function (e) {
var dataURL = e.target.result,
canvas = document.getElementById('myCanvas');
c = document.querySelector('canvas'), 
ctx = c.getContext('2d'),
img = new Image();

img.onload = function() {
c.width = 210;
c.height = 135;
ctx.drawImage(img, 5, 5, 200, 125);
};

img.src = dataURL;
};

reader.readAsDataURL(file);
}

function displayAsImage(file) {
var imgURL = URL.createObjectURL(file),
img = document.createElement('img');

img.onload = function() {
URL.revokeObjectURL(imgURL);
};

img.src = imgURL;
document.body.appendChild(img);
}
</script>
</div>