我有此代码可以通过Dropzone JS上传图像，然后将其上传到服务器之前，然后将其移交给Cropper。我遇到的问题是高度高于1000 PX的图像。容器将近3-4倍图像高度。

Question

在进行进一步的研究之后，我发现

context.drawImage(img, 0, 0);

在容器中间的绘制图像，而不是从左上角绘制的图像。

这是我到目前为止取得的最佳结果，该结果根据图像尺寸而有所不同。

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