Uploading images by increasing the file size by almost 10x

Good evening dear benefactors programmers. I have a problem, as I described in the title, which is affecting my image uploads. The image increases up to 10 times in size. And I'm not talking about dimension.

Ex: Initially, I have any image, let's assume a .jpg extension.

ThenIuploadthisimagethroughmysystem,andsaveittothesamedirectorywithadifferentname,justsowecancomparethem.However,itssizeincreasesinanunacceptableway.

I'musingJSwiththeCrop.jspluginsoIcanadjusttheimagethewayIwantitonthefrontend,thensendittoaJavaServlettopersistitinalocalfile.

Understandingtheflow

First,Iusuallyselecttheimagefrommycomputer:

varinput=$("#inputImage"); //The the input field
input.on("change", setCanvas); //bind the "change" event to be fired everytime user set a file from its computer
function setCanvas(e) {
    var reader = new FileReader(); //FileReader to read the input file set by the user
    /**
     * 
     * @param {type} event containing the data read from the file input by the yser
     * @returns {undefined} nothing
     * 
     * This function is called then the FileReader read all the data from the file set by the user.
     */
    reader.onload = function (event) {
        var img = new Image(); //Variable to storage the image set by the input field
        /**
         * 
         * @returns {undefined} nothing
         * 
         * This function is called then the image set by the user is finally loaded by the image source.
         */
        img.onload = function () {
            //When the image finally load...
            canvas.width = img.width; //Set the canvas width to the same of the image set by the user
            canvas.height = img.height; //Set the canvas height to the same of the image set by the user.
            ctx.drawImage(img, 0, 0); //draw the image into canvas using its context.
            $(".modal").modal(); //call the modal with the image
        }

        img.src = event.target.result; //Set the image source with the image set by the user via input field
    }
}

After this, after the modal is called, the Cropper.js plugin is initialized to handle crop editions.

$(".modal").on("shown.bs.modal", function () {
    //This function will be executed when the modal is shown completely.

    //Let's instantiate a cropper to edit the image
    cropper = new Cropper(canvas, {
        dragMode: "move", //allow to move the back-image
        autoCropArea: 0.5, //initiate with the crop in 50% of the image
        cropBoxMovable: true, //The crop box is movable
        cropBoxResizable: true //the crop box is resizable
    });

    $("#upload").on("click", onClick); //bind a click event to the "save" button

}

After everything is edited by the canvas, it is time to get the canvas information to be sent to the Servlet.

function canvasToBlob(canvas, type) {

    var byteString = atob(canvas.toDataURL().split(",")[1]),
            ab = new ArrayBuffer(byteString.length),
            ia = new Uint8Array(ab),
            i;
    for (i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ab], {
        type: type
    });

}

function onClick() {

    var blob = canvasToBlob(cropper.getCroppedCanvas(), filetype); //Get the blob from the canvas

    var fd = new FormData(); //Variable to storage the data that will be send to the server via AJAX

    fd.append("tImage", blob); //append the blob
    fd.append("tImageName", filename); //append the filename

    //Build the ajax request
    $.ajax("url", {
        data: fd,
        type: "POST",
        processData: false,
        contentType: false
    }).done(function (data) {
     //do something...
}

So far so good, let's check out the SERVER-SIDE

    Part part = null; //declares a Part object
    String name = null; //declares a String object

    try {
        part = request.getPart("tImage"); //Get the image coming from user ajax request
        name = request.getParameter("tImageName"); //get the name of the file set by user
    } catch (IOException | ServletException e) {
        //Somethign extremely wrong occured
    }
    //Declares a new "folder" to be created if it doesn't exist.
    File folder = new File(".." + File.separator + "images" + File.separator + "adm" + File.separator);

    if (!folder.exists()) {
        //Checks if folder doesn't exist

        folder.mkdirs(); //Create a new folder
    }

    //Create new File object. As this time, this file represents the image that will be persisted.
    File image = new File(".." + File.separator
            + "images" + File.separator
            + "adm" + File.separator
            + h.getName());
    try {
        image.createNewFile(); //it always creates a new file
        h.getImage().write(image.getCanonicalPath()); //Write the image into disk using Part.write
       }catch (IOException e) {
       //do something here
     }

Well, that's it. If anyone has any suggestions, but is not sure, please do not hesitate to comment on this question.

I have been trying to resolve this for a long time and I have not been able to do it at all.