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

Question

我通过一些Javascript代码创建了多个canvas元素以及一个输入文件元素。

我希望通过输入上传的图像由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方法添加了输入文件字段，然后与输入元素的名称匹配之后创建了画布元素。 我只是不确定如何使canvas元素从相应的文件输入中加载图像。

我真的不确定如何进行，还是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分配给画布。 在循环中采用它可使每个画布加载对应的图像