上傳多個圖像並將文件輸入到畫布元素

Question

我通過一些Javascript代碼創建了多個畫布元素以及輸入文件元素。

而我希望我用輸入上傳的圖像由canvas元素加載，但我很掙扎。

function addMoreFileUploads(id){ 
    $("#fileUploads").append('<input id="' + id + '" type="file" name="files[]" OnChange="handleImage()" /> <br><br>'); 
    var imageLoader = document.getElementById(id); 
    imageLoader.addEventListener('change', handleImage, false); 
} 

function createVariables(){ 

    $('#canvasInsert').empty(); 

    alert('variable time'); 
    idArray.forEach(function (entry){ 
     var canvasName = 'canvas' + entry; 
     $("#canvasInsert").append('<canvas id="'+ canvasName +'" style="border:1px solid #000000;" width="500" height="500"></canvas>'); 
    }); 
} 

這是我正在使用的一些代碼。 top方法添加輸入文件字段，然後創建畫布元素，然後匹配輸入元素的名稱。我只是不知道如何使畫布元素從相應的文件輸入加載圖像。

我真的不知道如何繼續，仍然是初學者到Javascript。

任何人都可以幫忙嗎？

Answer 1

你要實現這樣的功能handleimage：

function handleImage(e) { 

      var reader = new FileReader(); 
      reader.onload = function(event) { 

       var thisimage = new Image(); 
       thisimage.onload = function() { 
       }; 
       thisimage.src = event.target.result; 


      }; 
      reader.readAsDataURL(e.target.files[0]); 

}

然後，你可以指定thisimage.src到畫布上。在你的循環中採用它來讓每個畫布加載相應的圖像