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

Question

I know that I can use the add_image_size() function in the function.php of the theme to pre-determine the additional desired image file of specific width & height to be cropped and uploaded.

However, what I want to achieve is by giving a fixed aspect ratio (say 7:5 or 5:7, depending on whether the image is of the landscape/portrait type) and after the user click the form submit button to upload the file, the page will dynamically determine the desired width and height with the correct aspect ratio, and crop the original file then upload it.

For example, if the original file width and height is 72 x 50 (or 500 x 720), the page will dynamically crop the file to 70 x 50 (or 500 x 700), and upload this additional file along with other 3 files of default sizes.

Any help would be greatly appreciated.

Answer 1

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="<?php echo get_template_directory_uri().'/js/jquery.min.js'; ?>"></script>
   <script src="<?php echo get_template_directory_uri().'/js/jquery.Jcrop.min.js'; ?>"></script>
   <link rel="stylesheet" href="<?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