在畫布上繪制多個圖像

Question

我正在嘗試輸入一些圖像並將其繪制在畫布中。 我已經編寫了以下代碼，但是在互聯網上進行了大量搜索后，它仍然繪制了最后一張插入的照片。

請幫我。 我知道有與此相關的一些問題，但它們確實無法幫助我。

 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

這是因為在每次輸入選擇時，您都在loadImage函數中創建了一個新的canvsa元素。 全局初始化一次畫布，並使用相同的上下文繪制圖像。

 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>