This is the best result I got so far which vary according to the image dimenstions.

img.onload = function() {
   if ( img.height < 1000 ) {
       context.canvas.width = img.width;       
       context.canvas.height = img.height;     
       context.drawImage(img, 0, 0);
   } else {
       if ( img.height > img.width ) {
           context.canvas.width = 1000*img.width/img.height;       
           context.canvas.height = 1000;
           context.drawImage(img, 0, 0, 1000*img.width/img.height, 1000);
       } else {
           context.canvas.width = 1000;
           context.canvas.height = 1000*img.height/img.width;      
           context.drawImage(img, 0, 0, 1000, 1000*img.height/img.width);  
       }
   }
   var cropper = $canvas.cropper({     
       aspectRatio: 1, 
       dragMode: 'move',                               
   });
};