使用 jquery 调整多个图像的大小（客户端）答案

【问题标题】：multiple images resize with jquery (client-side)使用 jquery 调整多个图像的大小（客户端）
【发布时间】：2022-09-30 15:57:59
【问题描述】：

我正在尝试在我的图像中构建一个有效的上传脚本/表单，但我不知道如何在下面的代码中为多个图像执行此操作..

该代码适用于一个图像，但我无法计算多个图像的工作。

谁能指出我正确的方向？

(function( $ ) {

    $.fn.imageUploadResizer = function(options) {
        var settings = $.extend({
            max_width: 1000,
            max_height: 1000,
            quality: 1,
            do_not_resize: [],
        }, options );

        this.filter(\'input[type=\"files\"]\').each(function () {
            this.onchange = function() {
                const that = this; 
                const originalFile = this.files[0];
               
                if (!originalFile || !originalFile.type.startsWith(\'image\')) {
                    return;
                }

                // Don\'t resize if doNotResize is set
                if (settings.do_not_resize.includes(\'*\') || settings.do_not_resize.includes( originalFile.type.split(\'/\')[1])) {
                    return;
                }

                var reader = new FileReader();

                reader.onload = function (e) {
                    var img = document.createElement(\'img\');
                    var canvas = document.createElement(\'canvas\');

                    img.src = e.target.result
                    img.onload = function () {
                        var ctx = canvas.getContext(\'2d\');
                        ctx.drawImage(img, 0, 0);

                        if (img.width < settings.max_width && img.height < settings.max_height) {
                            // Resize not required
                            return;
                        }

                        const ratio = Math.min(settings.max_width / img.width, settings.max_height / img.height);
                        const width = Math.round(img.width * ratio);
                        const height = Math.round(img.height * ratio);

                        canvas.width = width;
                        canvas.height = height;

                        var ctx = canvas.getContext(\'2d\');
                        ctx.drawImage(img, 0, 0, width, height);

                        canvas.toBlob(function (blob) {
                            var resizedFile = new File([blob], \'resized_\'+originalFile.name, originalFile);

                            var dataTransfer = new DataTransfer();
                            dataTransfer.items.add(resizedFile);

                            // temporary remove event listener, change and restore
                            var currentOnChange = that.onchange;

                            that.onchange = null;
                            that.files = dataTransfer.files;
                            that.onchange = currentOnChange;

                        }, \'image/jpeg\', settings.quality);
                    }
                }

                reader.readAsDataURL(originalFile);
            }
        });
        return this;
    };

}(jQuery));

有没有办法将此代码更改为返回的多个图像？

标签： jquery

【解决方案1】：

（函数（$）{

$.fn.imageUploadResizer = function (options) {
    var settings = $.extend({
        max_width: 1000,
        max_height: 1000,
        quality: 1,
        do_not_resize: [],            
    }, options);

    this.filter('input[type="file"]').each(function () {
        this.onchange = function () {
            var countFiles = $(this)[0].files.length;
            var dataTransfer = new DataTransfer();
            for (var i = 0; i < countFiles; i++) {
                var that = this; // input node
                var originalFile = this.files[i];

                if (!originalFile || !originalFile.type.startsWith('image')) {
                    return;
                }

                // Don't resize if doNotResize is set
                if (settings.do_not_resize.includes('*') || settings.do_not_resize.includes(originalFile.type.split('/')[1])) {
                    return;
                }

                var reader = new FileReader();

                reader.onload = function (e) {
                    var img = document.createElement('img');
                    var canvas = document.createElement('canvas');

                    img.src = e.target.result
                    img.onload = function () {
                        var ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0);

                        if (img.width < settings.max_width && img.height < settings.max_height) {
                            // Resize not required
                            return;
                        }

                        const ratio = Math.min(settings.max_width / img.width, settings.max_height / img.height);
                        const width = Math.round(img.width * ratio);
                        const height = Math.round(img.height * ratio);

                        canvas.width = width;
                        canvas.height = height;

                        var ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0, width, height);

                        canvas.toBlob(function (blob) {
                            var resizedFile = new File([blob], 'resized_' + originalFile.name, originalFile);

                            
                            dataTransfer.items.add(resizedFile);

                            // temporary remove event listener, change and restore
                            var currentOnChange = that.onchange;

                            that.onchange = null;
                            that.files = dataTransfer.files;
                            that.onchange = currentOnChange;

                        }, 'image/jpeg', settings.quality);
                    }
                }

                reader.readAsDataURL(originalFile);
            }
        }
    });

    return this;
};

}(jQuery));

【讨论】：