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。在循环中采用它以使每个画布加载相应的图像

使用文件输入将多个图像上载到画布元素

1 个答案: