javascript - cropper container expand beyond img height - Stack Overflow

I have this code to upload an image via dropzone js then handed over to cropper before uploading it to server. The issue I have is with images with heights above 1000 px. the container expand almost 3-4X the image height.

<div>
<canvas id="logocanvas">
</canvas>
</div>

var $canvas = $('#logocanvas'),         
context = $canvas.get(0).getContext('2d');


Dropzone.options.singleupload = {
   paramName: 'logo',  
   maxFiles: 1,            
   uploadMultiple: false,
   maxFilesize: 4,         
   addRemoveLinks: true,   
   acceptedFiles: 'image/jpeg,image/png,image/gif',
   init: function() {
       this.on("success", function(file, responseText) {
           if (this.files && this.files[0]) {
               original =  this.files[0].dataURL;              
               if ( this.files[0].type.match(/^image\//) ) {
                   var reader = new FileReader();
                   reader.onload = function(e){                    
                       var img = new Image();                              
                       img.onload = function() {
                           context.canvas.width = img.width;       
                           context.canvas.height = img.height;     
                           context.drawImage(img, 0, 0);
                           var cropper = $canvas.cropper({     
                               aspectRatio: 1,                     
                           });
                       };
                       img.src = e.target.result;
                   };
                   reader.readAsDataURL(this.files[0]);
               }
           }
       });
   }
}

This is what i get with an image height of 4000 px screen shot of cropper container

With further investigation, I found context.drawImage(img, 0, 0);is drawing image at the middle of the container not from top left as it suppose to do.

I have this code to upload an image via dropzone js then handed over to cropper before uploading it to server. The issue I have is with images with heights above 1000 px. the container expand almost 3-4X the image height.

<div>
<canvas id="logocanvas">
</canvas>
</div>

var $canvas = $('#logocanvas'),         
context = $canvas.get(0).getContext('2d');


Dropzone.options.singleupload = {
   paramName: 'logo',  
   maxFiles: 1,            
   uploadMultiple: false,
   maxFilesize: 4,         
   addRemoveLinks: true,   
   acceptedFiles: 'image/jpeg,image/png,image/gif',
   init: function() {
       this.on("success", function(file, responseText) {
           if (this.files && this.files[0]) {
               original =  this.files[0].dataURL;              
               if ( this.files[0].type.match(/^image\//) ) {
                   var reader = new FileReader();
                   reader.onload = function(e){                    
                       var img = new Image();                              
                       img.onload = function() {
                           context.canvas.width = img.width;       
                           context.canvas.height = img.height;     
                           context.drawImage(img, 0, 0);
                           var cropper = $canvas.cropper({     
                               aspectRatio: 1,                     
                           });
                       };
                       img.src = e.target.result;
                   };
                   reader.readAsDataURL(this.files[0]);
               }
           }
       });
   }
}

This is what i get with an image height of 4000 px screen shot of cropper container

With further investigation, I found context.drawImage(img, 0, 0);is drawing image at the middle of the container not from top left as it suppose to do.

• javascript
• cropperjs

Share Improve this question Follow edited Feb 1 at 22:14 Maria Cyan asked Jan 31 at 22:03 Maria CyanMaria Cyan 322 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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',                               
   });
};