使用JIC库上传到服务器之前,从客户端压缩多张图像

问题描述 投票:0回答:1

我正在尝试上传带有预览的多张图片并立即对其进行压缩,但是它仍未进行压缩就上传到服务器,我很困惑我做错了什么,请帮忙)非常感谢这是我的代码:

var output_format = 'jpg';
    $(document).ready(function () {
        if (window.File && window.FileList && window.FileReader) {

            $("#files").on("change", function (e) {
                var jic = {
                    compress: function(source_img_obj, quality, output_format){

                        var mime_type = "image/jpeg";
                        if(typeof output_format !== "undefined" && output_format=="png"){
                            mime_type = "image/png";
                        };

                        var cvs = document.createElement('canvas');
                        cvs.width = source_img_obj.naturalWidth;
                        cvs.height = source_img_obj.naturalHeight;
                        var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
                        var newImageData = cvs.toDataURL(mime_type, quality/100);
                        var result_image_obj = new Image();
                        result_image_obj.src = newImageData;
                        return result_image_obj;
                    },
                }
                    var files = e.target.files;

                    for (var i = 0; i < files.length; i++) {
                        var f = files[i];
                        var fileReader = new FileReader();
                        fileReader.onload = (function (e) {
                            $("#mainPicturesContainer").append("<div class=\"puctureContainer\">" +
                                "<img id=\"source_image\"  src=\"" + e.target.result + "\" class=\"projectPictures\" style=\"height: inherit\">" +
                                "<div class=\"editPanel\">" +
                                "<button type=\"button\" onclick=\"deleteRestorePicture(this)\">Удалить</button>" +
                                "</div>" +
                                "</div>");



                        });
                        fileReader.readAsDataURL(f);
                        var quality = 30;
                        var text = document.getElementById("source_image");
                        f.src = jic.compress(text, quality, output_format );

                    }
                    $("#infoAboutPictures").innerHTML = "";
                }

            );
        } else {
            alert("Your browser doesn't support to File API")
        }
    });
javascript html jquery filereader
1个回答
0
投票

您需要在filereader的onload()回调中移动3行,因为否则,在filereader仍未读取文件的同时,压缩将立即运行

for (var i = 0; i < files.length; i++) {
    var f = files[i];
    var fileReader = new FileReader();
    fileReader.onload = (function (e) {
        $("#mainPicturesContainer").append("<div class=\"puctureContainer\">" +
            "<img id=\"source_image\"  src=\"" + e.target.result + "\" class=\"projectPictures\" style=\"height: inherit\">" +
            "<div class=\"editPanel\">" +
            "<button type=\"button\" onclick=\"deleteRestorePicture(this)\">Удалить</button>" +
            "</div>" +
            "</div>");

        var quality = 30;                                   //1
        var text = document.getElementById("source_image"); //2
        f.src = jic.compress(text, quality, output_format );//3

    });
    fileReader.readAsDataURL(f);

}
© www.soinside.com 2019 - 2024. All rights reserved.