New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(Feature Request) minImageWidth, minImageHeight #406

Closed
1c7 opened this Issue Aug 7, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@1c7

1c7 commented Aug 7, 2018

1. Current situation (as 2018-Aguest-7)

cropperjs have 3 methods for set

  • setData(data)
  • setCanvasData(data)
  • setCropBoxData(data)

2. What I want

Crop image no less then certain width or height

Example:

  • Image A is 4000px * 3000px

I want crop image no smaller than 760px * 430px

3. What I propose in this issue

add minImageWidth and minImageHeight as option

const cropper = new Cropper(image, {
  aspectRatio: 430 / 760,
  minImageWidth: 430,  // THIS
  minImageHeight: 760,  // THIS
});

4. What they do

  • minImageWidth cropbox no less then this natural width
  • minImageHeight cropbox width no less then this natural height

5. You may ask, isn't setCropBoxData for this?

https://github.com/fengyuanchen/cropperjs#setcropboxdatadata
image
I though the same at first. but the width and height are base on page, not image.
My container is 450x300
My image is 1658 × 1104
if I want image no less then 760x430, the following code doesn't work

      var cropper = new Cropper(cropperImg, {
        aspectRatio: 760/430, // Yes, aspect ratio same as minimum size
        crop(event) {
          if(event.detail.height < 430){
            this.cropper.setCropBoxData({
              left: event.detail.left,
              top: event.detail.top,
              height: 430, // this doesn't work, it's base on page. which is 300 height. which expand and take entire height. not image height (base on 1104)
            })
          }
        },
      })

6. I already solve this(minimum size) using the following code

      var self = this;
      let cropperImg = this.$refs['cropperImg']

      cropperImg.addEventListener('crop', (event) => {
        let minHeight = 430; // pixel
        const canvasData = self.cropper.getCanvasData();
        var heightRatio = canvasData.height / canvasData.naturalHeight; 
         // HERE, heightRatio are important

        if(event.detail.height < minHeight){ // control min height
          self.cropper.setCropBoxData({
            left: event.detail.left,
            top: event.detail.top,
            height: minHeight * heightRatio, // must multiply with heightRatio
          })
        }
      });

      this.cropper = new Cropper(cropperImg, {
        aspectRatio: 1 / 0.5657, // 430px/760px
        dragMode: 'move',
        viewMode: 1,
        zoomable: false,
        autoCropArea: 1,
      })

7. Working Result

  • crop area can not less then 430px height
  • because I set aspectRatio, I don't have to write code to control the width too)
    image

image

8. Conclusion

seem like we have 2 option:

  1. change setCropBoxData base on image size, not container size
  2. add minImageWidth and minImageHeight

9. Last

This just a propose, not asking or requiring you to do anything, after all it's free and open source.
I just want let you know this and know your opinion :)

Thank you

@fengyuanchen

This comment has been minimized.

Show comment
Hide comment
@fengyuanchen

fengyuanchen Aug 25, 2018

Owner

Thanks for your propose, but I will suggest you to use minCanvasWidth/Height directly as the canvas size is the same as the image's when it not rotated.

Owner

fengyuanchen commented Aug 25, 2018

Thanks for your propose, but I will suggest you to use minCanvasWidth/Height directly as the canvas size is the same as the image's when it not rotated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment