Add cropped image to an existing form file input and submit the form

I have a form with a couple of input fields and two file inputs(image upload). The basic requirement was working fine until I have tried to integrated image drag/upload and crop feature for one of the file input field.

The UI flow is like, for one of the images uploads, I have to open a popup, drag or drop image there, crop it and use that image for uploading.

I have successfully dragged/dropped image and crop it also. After cropping using jquery cropper library I have a base64 version of the image and a blob version of the same. What I need is to accommodate this image together with the existing form in the place of the corresponding image and the form submission code won't fail because of this integration.

Awaits help.

I will show a sample form to get the scenario clear.

//working form

<form method="post" enctype...>
    <!--<input type="file" name="image1">--> //image image should be uploaded and cropped from a modal, so I have changed this to as below
    <button>Upload Image</button> // when click on this a popup will appear and there I crop the uplaoded image separetly
    <input type="file" name="image2">


 var canvas = $imageCropper.cropper('getCroppedCanvas', canvasOptions);                                
 // get cropped image data
 var ImageURL = canvas.toDataURL('image/jpeg', quality);
 // transform it to Blob object
 var compressedFile = dataURItoBlob(dataUrl);

So I need to provide image value to this file upload element inorder to work the form submit feature as before.

Advance thanks for helping.