Cropper容器高度远超图片高度的问题求助（大尺寸图片场景）

我现在碰到个棘手的问题：用Dropzone.js上传图片后交给Cropper处理，但是当图片高度超过1000px时，Cropper的容器会被撑到图片高度的3-4倍，完全超出预期。

我的代码如下：

<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]);
               }
           }
       });
   }
}

比如用一张高度4000px的图片测试时，容器就会异常放大。经过进一步排查，我发现是context.drawImage(img, 0, 0);这行代码出了问题——它没有按照预期从容器的左上角开始绘制图片，反而把图片画到了容器的中间位置，这应该就是容器被过度拉伸的原因。

备注：内容来源于stack exchange，提问作者Maria Cyan