上传多个图像并将文件输入到画布元素

我通过一些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。

任何人都可以帮忙吗？

来源

2014-01-17 Chris G

你要实现这样的功能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到画布上。在你的循环中采用它来让每个画布加载相应的图像

来源

2014-01-17 22:31:13 NetPlayer

上传多个图像并将文件输入到画布元素

回答

相关问题