Cropper: minCropBox Size not absolute

[niklasravnsborg]

Hey there, this is an awesome project, really appreciate it!

Unfortunately, I spotted an inconvenience when trying to crop a picture. minCropBoxWidth and minCropBoxHeight seem to be relative to the rendered crop box dimensions, not to the image size.
For example, when I'm trying to crop a 1000x1000 image which gets displayed at 500x500 and my minCropBoxWidth and minCropBoxHeight are both set to 500, I can't crop the image. So I end up defining different minCropBox values than my intended resolution. And that doesn't seem valid either because when I am on a different browser size I have other crop limitations.

I hope that makes sense. I think both values should be relative to the image not to the viewport. Or are there other solutions?

[fengyuanchen]

Just set an aspect ratio, and resize the result on server-side.

same issues #274, #522, #573, etc.

[niklasravnsborg]

@fengyuanchen Well, when I set the aspect ratio to 1 and then resize the image server-side, images could be smaller than expected. I need a certain resolution, so scaling images up wouldn't provide the desired quality. I need to limit the crop area by real pixels of the image. :pensive:

[fengyuanchen]

You can compute real pixels by ratio:

var minCropBoxWidth = 200;

$().cropper({
  zoom: function (e) {
    var cropBoxData = $(this).cropper('getCropBoxData');

    // var canvasData = $(this).cropper('getCanvasData');
    // var ratio = canvasData.width / canvasData.naturalWidth;
    // console.log(ratio === e.ratio); 
    // > true

    if (e.ratio > e.oldRatio) { // Zoom in
      if (cropBoxData.width * e.ratio > minCropBoxWidth) {
        e.preventDefault();
        this.zoomTo(minCropBoxWidth / cropBoxData.width);
      }
    }
  }
});

[niklasravnsborg]

@fengyuanchen This is my config:

aspectRatio: 3 / 2,
viewMode: 1,
background: false,
center: false,
autoCropArea: 1,
minCropBoxWidth: 120,
minCropBoxHeight: 80,
movable: false,
rotatable: false,
scalable: false,
zoomable: false

I don't use the zoom feature. Your suggested e.preventDefault() doesn't seem to work in crop: function(e). I cannot get forward with your suggested solution.

I really like the limitation of CropBoxWidth to have an image at a certain resolution but I think it shouldn't be relative to the crop HTML element. Are you able to understand my problem? I want to understand why minCropBoxWidth currently is relative to the crop element size. :confused:

[fengyuanchen]

The canvas and crop box should relative to document size just because they are actual elements on the document.

Would you like the width of an image element is equal to its naturalWidth?