How to compress image before upload it on server using javascript?

Question

I am developing hybrid mobile application where I'm uploading images to object storage, but as of now I'm able to upload single as well as multiple images but, max size up to 2MB each. I just want to compress that image before uploading .

I need some help regarding that please.

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