在画布上绘制多个图像

Question

I'm trying to input some images and draw them in a canvas. I've wrote the following code but, after a lot of searches on the internet, it still draw the last photo inserted.

Please help me. I know that there are some questions related to this one but they really can't help me.

 function loadImage() { var input, file, img, fr; var canvas = document.getElementById("canvas") canvas.width = 500; canvas.height = 500; var ctx = canvas.getContext("2d"); if (typeof window.FileReader !== 'function') { write("The file API isn't supported on this browser yet."); return; } input = document.getElementById('imgfile'); if (!input) { write("Um, couldn't find the imgfile element."); } else if (!input.files) { write("This browser doesn't seem to support the `files` property of file inputs."); } else if (!input.files[0]) { write("Please select a file before clicking 'Load'"); } else { for (var i = 0; i < input.files.length; i++) { (function(n) { setupReader(input.files[n]); })(i); } function setupReader(file) { fr = new FileReader(); addLoadEventFR(createImage); fr.readAsDataURL(file); } function createImage() { img = new Image(); addLoadEventIMG(imageLoaded); img.src = fr.result; } function imageLoaded() { console.log(i); ctx.drawImage(img, i * 100, 0); } } function write(msg) { var p = document.createElement('p'); p.innerHTML = msg; document.body.appendChild(p); } function addLoadEventFR(func) { var oldonload = fr.onload; if (typeof fr.onload != 'function') { fr.onload = func; } else { fr.onload = function() { if (oldonload) { oldonload(); } func(); } } } function addLoadEventIMG(func) { var oldonload = img.onload; if (typeof img.onload != 'function') { img.onload = func; } else { img.onload = function() { if (oldonload) { oldonload(); } func(); } } } } 

 <input type ='file' id ='imgfile' multiple></in> <input type = 'button' class="button" id = 'btnLoad' value="Load" onclick="loadImage()"> <canvas id="canvas" style="border:1px solid #d3d3d3;"></canvas> 

Answer 1

Its because on every input selection you are creating a new canvsa element inside loadImage function. Initialize canvas once globally and use the same context for drawing images.

 var canvas = document.getElementById("canvas") canvas.width = 500; canvas.height = 500; var ctx = canvas.getContext("2d"); function loadImage() { var input, file, img, fr; if (typeof window.FileReader !== 'function') { write("The file API isn't supported on this browser yet."); return; } input = document.getElementById('imgfile'); if (!input) { write("Um, couldn't find the imgfile element."); } else if (!input.files) { write("This browser doesn't seem to support the `files` property of file inputs."); } else if (!input.files[0]) { write("Please select a file before clicking 'Load'"); } else { for (var i = 0; i < input.files.length; i++) { (function(n) { setupReader(input.files[n]); })(i); } function setupReader(file) { fr = new FileReader(); addLoadEventFR(createImage); fr.readAsDataURL(file); } function createImage() { img = new Image(); addLoadEventIMG(imageLoaded); img.src = fr.result; } function imageLoaded() { console.log(i); ctx.drawImage(img, i * 100, 0); } } function write(msg) { var p = document.createElement('p'); p.innerHTML = msg; document.body.appendChild(p); } function addLoadEventFR(func) { var oldonload = fr.onload; if (typeof fr.onload != 'function') { fr.onload = func; } else { fr.onload = function() { if (oldonload) { oldonload(); } func(); } } } function addLoadEventIMG(func) { var oldonload = img.onload; if (typeof img.onload != 'function') { img.onload = func; } else { img.onload = function() { if (oldonload) { oldonload(); } func(); } } } } 

 <input type ='file' id ='imgfile' multiple> <input type = 'button' class="button" id = 'btnLoad' value="Load" onclick="loadImage()"><br> <canvas id="canvas" style="border:1px solid #d3d3d3;"></canvas>