javascript - 将带有文件输入的多个图像上传到 Canvas 元素

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 元素。我只是不确定如何使 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分配给canvas。在循环中采用它让每个 Canvas 加载相应的图像