Search code examples
javascriptjqueryhtmlcsscropper

Force cropper to always be either full width or full height

I have been using cropper js.

I am resizing the cropper based on input values(integer). For example A and B.

So when user enters A = 200 and B = 240. The cropper calculates the aspect ratio and shows the cropper. Is there a option or some kind of hack to force the cropper to either force it to fill the width or height based on the ratio?

If i was unclear in my question see images below. First there is an incorrect image where i got spaces on both sides and at the top and bottom. Incorrect

This image is correct: Correct So at the correct image the user shouldn't be able to make it smaller, and if the the ratio get's below 1 in ratio it should fill the height instead of width.

Do someone have a good soultion on this?

Solution

  • I figured it out! If someone looking for the answer, what i did --> Set following options to cropper:

    • viewMode: 2 (not necessarily 2, but needs to be more than 0).
    • cropBoxMovable: true. (Could only change the cropBox by my inputs.)
    • dragMode: 'none'. Otherwise the user could drag a new cropBox.
    • cropBoxResizable: false. OtherWise user could drag in the corners in of crfopbox and change size.