Jquery多图像上传和将图像放到画布元素

Jquery multiple images upload and put images to canvas elements

本文关键字:图像 布元素 元素 Jquery      更新时间:2023-09-26

我已经为图像创建了单个上传并将图像放到画布上,下面是演示。现在我想修改多个上传图像的脚本,这是我的修改脚本:

JS :

$(function() {
    $('#file-input').on('change',function(e) {
        if (!e.target.files.length || !window.FileReader) {
            return;
        } 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;
                }
                var file = e.target.files[i], imageType = /image.*/;
                 if (!file.type.match(imageType))
                 return;
                var reader = new FileReader();
                reader.onload = fileOnload(numb);
                reader.readAsDataURL(file);
            }
        }
    });
    function fileOnload(numb,e) {
        var $img = $('<img>', { src: e.target.result }); // this line is error
        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);
        });
    }
});

<input type="file" id="file-input" multiple>
<div id="thumbnails"> </div>

但是我在控制台得到这个错误:

Uncaught TypeError: Cannot read property 'target' of undefined

jsfiddle

您的问题似乎是没有传递函数参数。

应该是:

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);
        });
    }
});
<

JSFiddle演示/strong>