Dynamically determine the width and height of a image file to be cropped & uploaded AFTER form submission given fixed aspect ratio

Here is my resolution:

1. Download and unzip JCrop and unzip jquery.Jcrop.min.js & jquery.Jcrop.css to the js & css sub-directory respectively under the theme template directory.

2. Place the following code in header.php just before </head> (you need to comment out the first line if you’ve already include the jquery.min.js in the other place):

   <script src="https://wordpress.stackexchange.com/questions/209358/<?php echo get_template_directory_uri()."/js/jquery.min.js'; ?>"></script>
   <script src="https://wordpress.stackexchange.com/questions/209358/<?php echo get_template_directory_uri()."/js/jquery.Jcrop.min.js'; ?>"></script>
   <link rel="stylesheet" href="https://wordpress.stackexchange.com/questions/209358/<?php echo get_template_directory_uri()."/css/jquery.Jcrop.css'; ?>" type="text/css" />
   

3. Put the following code in the form php file (I also put my inline css):

   <input name="userImg" type="file" accept=".jpg,.jpeg,.png,.gif" size="25" />
   <img id="testImg" alt="your image" style="display:none;" />                 
   <input type="button" id="btnCrop" value="Crop" 
        style="display:none; float:left; clear:both; margin-top:10px; margin-bottom: 10px" />
   
   <label name="canvas" for="canvas" 
        style="float:left; clear:both; display:none; margin-bottom:5px">
        <?php _e('Preview the cropped image', 'usp'); ?></label>
   <canvas id="canvas" height="1" width="1" 
        style="float:left; clear:both; max-width:400px; max-height:400px" ></canvas>
   
   <input type="hidden" name="imgX1" id="imgX1" />
   <input type="hidden" name="imgY1" id="imgY1" />
   <input type="hidden" name="imgWidth" id="imgWidth" />
   <input type="hidden" name="imgHeight" id="imgHeight" />
   
   <input type="hidden" name="imgCropped" id="imgCropped" />    
   

4. Put the following code in the main jquery js file (I use canvas):

   $("input[name="userImg"]").change(function () {
       $('#testImg').hide();
       if ( this.files && this.files[0] ) {
           var FR= new FileReader();
           FR.onload = function(e) {
               $('#testImg').show();
               $('#testImg').attr( "src", e.target.result );               
               $('#testImg').on( 'load', function() { 
                   var jcrop_api;
                   if ( $(this).width() > $(this).height() )
                   {
                       $('#testImg').Jcrop({
                           onChange: SetCoordinates,
                           onSelect: SetCoordinates,
                           aspectRatio: 7/5,
                           boxWidth: 700,
                           boxHeight: 500
                       }, function(){
                           jcrop_api = this;
                           var dim = jcrop_api.getBounds();
                           jcrop_api.setSelect([0, 0, dim[0], dim[1]]);
                       });
                   }
                   else
                   {
                       $('#testImg').Jcrop({
                           onChange: SetCoordinates,
                           onSelect: SetCoordinates,
                           aspectRatio: 5/7,
                           boxWidth: 500,
                           boxHeight: 700
                       }, function(){
                           jcrop_api = this;
                           var dim = jcrop_api.getBounds();                
                           jcrop_api.setSelect([0, 0, dim[0], dim[1]]);            
                       });         
                   }   
               });
           };
           FR.readAsDataURL( this.files[0] );
   
           $('#btnCrop').click(function () {                               
               var canvas = $("#canvas")[0];
               var context = canvas.getContext("2d");
               var img = new Image();
               img.src = $('#testImg').attr("src");
               img.onload = function () {              
                   $img = $('#testImg');
                   imgW = img.width,
                   imgH = img.height;      
   
                   var ratioY = imgH / $img.height(),
                       ratioX = imgW / $img.width();
   
                   var getX = $('#imgX1').val() * ratioX,
                       getY = $('#imgY1').val() * ratioY,
                       getWidth = $('#imgWidth').val() * ratioX,
                       getHeight = $('#imgHeight').val() * ratioY;
   
                   canvas.height = getHeight;
                   canvas.width = getWidth;                    
                   context.drawImage(img,getX,getY,getWidth,getHeight,0,0,getWidth,getHeight);
                   $("label[name="canvas"]").show();
                   $('#imgCropped').val(canvas.toDataURL('image/jpeg'));           
               };      
           }); 
           function SetCoordinates(c) {
               $('#imgX1').val(c.x );
               $('#imgY1').val(c.y );
               $('#imgWidth').val(c.w );
               $('#imgHeight').val(c.h );  
               $('#btnCrop').show();
           };          
       }
   });         
   

References:

1. Getting file width and height with file api
2. Cropping images in the browser before the upload
3. Crop and Upload Image with Thumbnail using jQuery and HTML5 in ASPNet
4. Jcrop have problems with large size images
5. Crop and show result with canvas