Javascript Jquery多个图像上传并将图像放入画布元素

我已经为图片创建了一个上传，并将图片放到画布上，下面是。现在我想修改多个上传图像的脚本，下面是我的修改脚本：

JS:

---

你的问题似乎没有通过函数论证

应该是：

reader.onload = fileOnload(numb,e);

而不是

reader.onload = fileOnload(numb);

因此，您的代码将是：

$(function() {
    $('#file-input').on('change',function(e) {
        console.log(e.target.files[0]);
        if (!e.target.files.length || !window.FileReader) {
            return false;
        } else {
            var countedfiles = $('#thumbnails canvas[data-other="fileCanvas"]').length; // check lenght of file canvas
            for (var i = 0; i < e.target.files.length; i++) {
                if (countedfiles > 0){
                 var numb = countedfiles + 1;
                } else {
                 var numb = i;
                }
                console.log(e.target.files[i]);
                var file = e.target.files[i];

                var reader = new FileReader();
                reader.onload = fileOnload(numb,e);
                reader.readAsDataURL(file);
            }
        }

    });

    function fileOnload(numb,e) {
        var $img = $('<img>', { src: e.target.result });
        var newCanvas = '<canvas class="canvas" width="120px" height="120px" data-other="fileCanvas" id="canvas-'+numb+'"></canvas>';
        $('#thumbnails').append(newCanvas);
        var canvas =  $('#canvas-'+numb)[0];

        var context = canvas.getContext('2d');

        $img.load(function() {
            var maxWidth = 120; // Max width for the image
            var maxHeight = 120;    // Max height for the image
            var ratio = 0;  // Used for aspect ratio
            var width = this.width;    // Current image width
            var height = this.height;  // Current image height


            // Check if the current width is larger than the max
            if(width > maxWidth){
                ratio = maxWidth / width;   // get ratio for scaling image
                this.width = maxWidth; // Set new width
                this.height = height * ratio; // Scale height based on ratio
                height = height * ratio;    // Reset height to match scaled image
            }

            var width = this.width;    // Current image width
            var height = this.height;  // Current image height

            // Check if current height is larger than max
            if(height > maxHeight){
                ratio = maxHeight / height; // get ratio for scaling image
                this.height = maxHeight; // Set new height
                this.width = width * ratio; // Scale width based on ratio
                width = width * ratio;    // Reset width to match scaled image
            }
            var newWidth = this.width;
            var newHeight = this.height;
            context.drawImage(this, 0, 0, newWidth, newHeight);
        });

    }
});

reader.onload = fileOnload(numb,e);

reader.onload = fileOnload(numb);

$(function() {
    $('#file-input').on('change',function(e) {
        console.log(e.target.files[0]);
        if (!e.target.files.length || !window.FileReader) {
            return false;
        } else {
            var countedfiles = $('#thumbnails canvas[data-other="fileCanvas"]').length; // check lenght of file canvas
            for (var i = 0; i < e.target.files.length; i++) {
                if (countedfiles > 0){
                 var numb = countedfiles + 1;
                } else {
                 var numb = i;
                }
                console.log(e.target.files[i]);
                var file = e.target.files[i];

                var reader = new FileReader();
                reader.onload = fileOnload(numb,e);
                reader.readAsDataURL(file);
            }
        }

    });

    function fileOnload(numb,e) {
        var $img = $('<img>', { src: e.target.result });
        var newCanvas = '<canvas class="canvas" width="120px" height="120px" data-other="fileCanvas" id="canvas-'+numb+'"></canvas>';
        $('#thumbnails').append(newCanvas);
        var canvas =  $('#canvas-'+numb)[0];

        var context = canvas.getContext('2d');

        $img.load(function() {
            var maxWidth = 120; // Max width for the image
            var maxHeight = 120;    // Max height for the image
            var ratio = 0;  // Used for aspect ratio
            var width = this.width;    // Current image width
            var height = this.height;  // Current image height


            // Check if the current width is larger than the max
            if(width > maxWidth){
                ratio = maxWidth / width;   // get ratio for scaling image
                this.width = maxWidth; // Set new width
                this.height = height * ratio; // Scale height based on ratio
                height = height * ratio;    // Reset height to match scaled image
            }

            var width = this.width;    // Current image width
            var height = this.height;  // Current image height

            // Check if current height is larger than max
            if(height > maxHeight){
                ratio = maxHeight / height; // get ratio for scaling image
                this.height = maxHeight; // Set new height
                this.width = width * ratio; // Scale width based on ratio
                width = width * ratio;    // Reset width to match scaled image
            }
            var newWidth = this.width;
            var newHeight = this.height;
            context.drawImage(this, 0, 0, newWidth, newHeight);
        });

    }
});