I have a page where I am successfully uploading multiple images using Dropzone.js but i want visitors to crop them as per their choice before upload. I am able to use cropper.js separately but failed to integrate them together.

Here is my original working code extract.

HTML:

<div class="dropzone dz-clickable" id="myDrop">
    <div class="dz-default dz-message" data-dz-message="">
        <span>No Photo Selected</span>
    </div>
</div>
<div id="add_file">POST</div>

JS:

//Dropzone script
    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone("div#myDrop", 
     { 
         paramName: "__files", // The name that will be used to transfer the file
         addRemoveLinks: true,
         uploadMultiple: true,
         withCredentials: true,
         autoProcessQueue: false,
         parallelUploads: 5,
         maxFiles: 5,
         maxFilesize: 20, // MB
         acceptedFiles: ".png, .jpeg, .jpg, .gif, .JPG, .jfif",
         url: "sdk/process-upload.php",
         capture: "camera",
         init: function () {
             this.on('sending', function(file, xhr, formData) {
                 $("#shadow2").show();
                 // Append all form inputs to the formData Dropzone will POST
                 var l = document.getElementById("locationval").value;
                 formData.append('location', l);
                 var x = document.getElementById("postmaker").innerText;
                 formData.append('pdata', x);
             });
         }
         
     });

     
     /* Add Files Script*/
     myDropzone.on("success", function(file, message){
        $("#msg").html(message);
        //setTimeout(function(){window.location.href="index.php"},800);
     });
     
     myDropzone.on("error", function (data) {
         $("#msg").html('<div class="alert alert-danger">There is some thing wrong, Please try again!</div>');
     });
     
     myDropzone.on("complete", function(file) {
        myDropzone.removeFile(file);
     });
     
     $("#add_file").on("click",function (){
        myDropzone.processQueue();  
     });

I want my users to upload all the images cropped in same dimension. If multiple is not possible at lease please help me with one image.

Note: I am not using bootstrap