search

advanced-cropper / vue-advanced-cropper

The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design
https://advanced-cropper.github.io/vue-advanced-cropper/
Other
931 stars 130 forks source link

Limit boundaries to image area after rotation #184

Closed manyasone closed 2 years ago

manyasone commented 2 years ago

Hi,

is it possible to limit the boundaries after rotating the image, so that this is not possible anymore: image

Instead, the corners of the stencil should always be within the image, so that there can no black area get cropped: image

PS: This component seems quite well done!

Norserium commented 2 years ago

@manyasone, well, it's the good question and I knew that someone will ask it sometime.

Currently, the algorithms are pretty straightforward. They operate plain rectangles. Look at the example below.

Explanation When the image is not rotated we should solve trivial task (at left).

When the image is rotated on an arbitrary angle the task is much more complicated (at right). When we have two limits simultaneously we should deal with the convex polygon and it's the problem. It's solvable, but it makes things far more complicated.

Most of croppers that supports the described feature don't have the possibility to set the limits for the visible area as this cropper do.

Therefore the short answer is it's impossible right now. The long answer is that it may be possible in the future, but I should pay the price for that, for example, by reducing the cropper's flexibility.

As an alternative probably it's possible to use a custom auto zoom to implement this feature (like react-mobile-cropper do), but it looks that you will encounter some troubles on this way. That cropper uses the much more modern core.

manyasone commented 2 years ago

Allright, thanks! I had already thought of the possibility to use auto zoom on rotate - maybe I'll try it this way.

Norserium commented 2 years ago

@manyasone, I forgot to mention the another point.

If the image is not rotated the bounding box for the stencil doesn't depend on its figure: image

It gives the possibility to use any possible figure for the stencil (rectangle, rounded rectangle, circle, triangle and etc.). The cropper doesn't need to know about it.

On the other hand, if the image is rotated, the bounding box depends on the stencil figure. image

The stencil is an arbitrary component, so the cropper doesn't know what's figure do you use.

Thus, to implement this feature I should sacrifice two things:

  1. The possibility to set arbitrary visible area limitations
  2. The possibility to set an arbitrary stencil figure or the simplicity of this possibility, by requiring the definition of a bounding box for the stencil.

It's hard choice, considering that this feature is not implemented in any other alternative web croppers I know (except paid Pintura, that never have two possibilities mentioned above). By the way, if you know any another exceptions (no matter what's framework they use), tell me. It would be helpful.