Отображение захваченных или просмотренных изображений на 2 разных холстах - PullRequest
Новая
       43

Отображение захваченных или просмотренных изображений на 2 разных холстах

0 голосов
/ 19 октября 2018

Я пытаюсь создать форму с двумя холстами, где мне нужно два, нарисовать два разных изображения, снятых на мобильный телефон, а затем отправить их по почте.

Форма работает, но у меня возникают проблемы при рисованиидва изображения.

Показывает только первое.Второй остается пустым.

Это на 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>
...