如何使用javascript将图像上传到服务器之前压缩图像？

Question

我正在开发混合移动应用程序，我将图像上传到对象存储，但到目前为止，我可以上传单张图像和多张图像，但最大尺寸可达2MB。我只想在上传之前压缩该图片。

我需要一些帮助。

var file_name;
var j;
var variablearray = [];
var filenamearray;

$(document).ready(function() {

  if (window.File && window.FileList && window.FileReader) {
    var items = [
      [],
      []
    ];
    var arrraysize = [];
    $("#myFile").on("change", function(e) {
      if (this.files) {
        var FR = new FileReader();
        // here am selecting multiple image using below loop
        for (i = 0; i < this.files.length; i++) {
          var inp = document.getElementById('myFile');
          filenamearray = [];
          // to get file selected file names
          /*for(j=0;j<inp.files.length;j++)
          {*/
          file_name = inp.files.item(i).name;
          variablearray[i] = inp.files.item(i).name;
          // filenamearray.push(variablearray[i]);

          // console.log("yos :",variablearray[j]);
          // below onload function am using for image preview                  
          FR.onload = function(e) {

            $("<span class=\"pip\">" +
              "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + variablearray[i] + "\"/>" +
              "<br/><span class=\"remove\">Remove image</span>" +
              "</span>").insertAfter("#myFile");
            $(".remove").click(function() {
              $(this).parent(".pip").remove();
            });

            ready[i] = e.target.result;
            // console.log("ready value at index 0 :",ready[0]);
            console.log("ready length ", ready.length - 1);
            arrraysize.push(e.target.result);
            // console.log("my array is:",arrraysize.length);
          }
          FR.readAsDataURL(this.files[i]);
          // }
        }
      }

      $(document).ready(function() {
        $("form").submit(function() {

          console.log("in submit button:", arrraysize.length);
          //console.log("in submit button2:",filenamearray.length);

          /*filenamearray.push("image1");
          filenamearray.push("image2");
          filenamearray.push("image3");*/
          for (var k = 0; k < arrraysize.length; k++) {
            console.log("Arraysize inside loop :", arrraysize.length);

            var date = new Date();
            var time = date.toJSON();

            var form = new FormData($("#upload_image")[k]);
            //var abc = "file="+arrraysize[k]+"&Name="+filenamearray[k];
            var abc = "file=" + arrraysize[k] + "&Name=S_no_" + serial_no + "_" + time + "_" + k;

            // console.log(" file name with position :",filenamearray[k]);
            //below script am using to upload
            //                    
            $.ajax({
              type: "POST",
              url: 'http://CordovaApp.jsp',
              data: abc,
              crossDomain: true,
              success: function(result) {
                console.log("in success ", result);
                alert("success");
                window.location.reload();
              },
              error: function(er) {
                alert(er);
              }
            });
            // i just want to compress image before uploading
          }
        });
      });
    });
  }
  else {
    alert("Your browser doesn't support to File API");
  }
});