нужно сделать приложение для конкатенации изображений,которые берутся из 2 инпутов(в разметке должны быть только 2 инпута и канвас) и отображаются в теге canvas.На данный момент получается отображать только 1 инпут,и не понимаю как сделать для обоих картинок
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
let uploadedFile = document.getElementById('uploaded-file');
let uploadedFile2 = document.getElementById('uploaded-file2');
window.addEventListener('DOMContentLoaded',initImageLoader);
function initImageLoader(){
uploadedFile.addEventListener('change',handleManualUploadedFiles);
uploadedFile2.addEventListener('change',handleManualUploadedFiles);
function handleManualUploadedFiles (ev){
let file = ev.target.files[0];
let file2 = ev.target.files[1];
handleFile(file,file2);
}
}
function handleFile (file,file2){
let imageType = /image.*/;
if(file.type.match(imageType) ){
let reader = new FileReader();
reader.onloadend = function(event) {
let tempImageStore =new Image();
tempImageStore.onload = function(ev) {
canvas.height = ev.target.height;
canvas.width = ev.target.width;
context.drawImage(ev.target,0,0);
}
tempImageStore.src = event.target.result;
}
reader.readAsDataURL(file);
}
}