Zoom, and Cropper size.

[alexdpts]

How can i bind Zoom on mouseWheel+key (eq. Shift+mouseWheel)? How can i Resize Cropper height after zooming image to image size after zooming (eq. if zoomed image height > Cropper height)?

[Norserium]

Hello, @alexdpts!

How can i bind Zoom on mouseWheel+key (eq. Shift+mouseWheel)?

And prevent zoom on mouse wheel?

How can i Resize Cropper height after zooming image to image size after zooming (eq. if zoomed image height > Cropper height)?

Could you provide any example? It's not clear what you want to get.

[luckydonald]

Yes, that automatic zooming is a unwanted behavior here as well.

[Norserium]

Yes, that automatic zooming is a unwanted behavior here as well.

@luckydonald , what an automatic zooming?

[alexdpts]

And prevent zoom on mouse wheel?

Bind zoom on key+mousewheel, and leave normal page scroll on mouseWheel.

Could you provide any example? It's not clear what you want to get.

For example:https://norserium.github.io/vue-advanced-cropper/introduction/getting-started.html#minimal-working-example Cropper container has fixed size. When i zoom image, container size not change. As result, if zoomed image size over than cropper container size, i can't select parts of image that are outside of container. This is why i need:

1. Zoom on key+mousewheel
2. Normal page scroll on mousewheel
3. Resize (fit) cropper container to zoomed image for select image part to crop, when image eg zoomed to maximum.

Sorry, for my tеrrible english

[Norserium]

@alexdpts, alas, it's not supported native (just like in the other available cropper alternatives). You can try to get around this with some sort of a workaround, but I need more details to advice something.

What if the container can't become larger? For example, it has the same width as the window width?

Sorry, for my tеrrible english

It's okay.

[Norserium]

@alexdpts, alas, there are problems with implementation the last requirement. It looks like it impossible to do right now without the significant code changes.

For the other ones I wrote the simple workaround.

[alexdpts]

alas, it's not supported native (just like in the other available cropper alternatives). You can try to get around this with some sort of a workaround, but I need more details to advice something.

What if the container can't become larger? For example, it has the same width as the window width?

I try to show on some simple pictures:

1. at start we have page with cropper container contains image, yellow rectangle - area we need
   
2. we roughly choose area with stensil
3. For some precission selection we zoom image. As a zoom result, we get, that yellow area is out of cropper container Yes, we can move the image so that the yellow zone is inside the container, but what if we need to crop along the green borders with some precision

Changing the size of the container to the size of the enlarged image will be especially important if you need to cut out a rectangular area from an image that is rotated not by 180 or 90 degrees. Eg

And the question will remain relevant even if the size of the cropper container is equal to the size of the window.

I think that the optimal solution would be to give the container a minimum width and height, and increase the size of the container when the image is zoomed (increased). Let the user place the container in a scrollable wrapper. Accordingly, the image zoom must be bind on key+mousewheel for native brouser scroll the wrapper containing the cropper container on mousewheel.

[Norserium]

@luckydonald thanks for the detailed response. I understand the concept, but it looks unusual. Did you encounter any real cropper example that implements it?

[alexdpts]

thanks for the detailed response. I understand the concept, but it looks unusual. Did you encounter any real cropper example that implements it?

i try https://github.com/timtnleeProject/vuejs-clipper that implements this (with some css corrections), but that can't flip image.

upd. I'm stupid idiot :) difference betwen vuejs-clipper and your component in that the vuejs-clipper occupies the entire width of the parent block, scales the image proportionally to the width and sets self height to the height of the scaled image, and does not fit the image into itself. On horizontal images this is not so important, but on vertical images it is very, they are initially large enough on screen to be cropped with some precision.

[Norserium]

@alexdpts, I'm sorry, but I didn't see the real difference in the behavior of my cropper and vuejs-clipper. Could you give the link to the example, that can't be implemented in my cropper?

[alexdpts]

@alexdpts, I'm sorry, but I didn't see the real difference in the behavior of my cropper and vuejs-clipper. Could you give the link to the example, that can't be implemented in my cropper?

I make example. See at http://f0508697.xsph.ru/

try load any big vertical image.

at left hand - vue advanced cropper at right - vuejs-clipper

at left hand stensil height is limited by the parent block height, as result at right hand i can select image area whose height is greater than the height of the parent block (if i need some precission of selection)

[Norserium]

@alexdpts, thank you very much for the example. Your issue is now clear to me.

This cropper just tries to be responsive and fit itself in the limited area (vacCell). It is the useful feature for many different use-cases.

You can redefine this behavior by setting updateBoundaries prop to achieve the exactly same behavior. There is the example.

[alexdpts]

@alexdpts, thank you very much for the example. Your issue is now clear to me.

This cropper just tries to be responsive and fit itself in the limited area (vacCell). It is the useful feature for many different use-cases.

You can redefine this behavior by setting updateBoundaries prop to achieve the exactly same behavior. There is the example.

Thank you. I try it. It's great. Sorry to waste so much of your time

[Norserium]

@alexdpts, try this example instead. It should provide the even better user experience than vue-js-clipper for horizontal images in your use-case.

[Norserium]

@alexdpts, any news?

[alexdpts]

@alexdpts, any news?

Hello. Have some.

The example with updateBoundaries works great within my markup (when cropper-wrapper is a flex cell) and set position:absolute;max-height:none; to cropper container .

When trying to add (or replace with) the last example, need to wrap the cropper with a block with position: absolute; left: 0; top: 0; (otherwise, a third of the images goes beyond the upper border of the flex cell (wrapper parent) and is not available for cropping) everything seems to work (cropping, rotating, flipping), but when changing the image, errors appear in the console about the impossibility of determining naturalSize and aspectRatio of undefined (it looks like this is about starting stencil rendering);

Example with updateBoundaries is enough for me. There is one more minor question, on large images cropping takes some time and it would not be bad to show some kind of indicator that something is happening (actually hide the indicator when the process ends, eg. if getResult method generate event on finish it's wil be ok), but these are minor things.

[Norserium]

@luckydonald, what do you mean by "cropping takes some time"? Could you provide the video example?

Speaking of examples, could you provide the source of your example, that you posted above?

[alexdpts]

@luckydonald, what do you mean by "cropping takes some time"? Could you provide the video example?

https://user-images.githubusercontent.com/17212759/127096611-bdd8eaae-9857-4609-89f4-b6fff316f054.mp4 (Clicking on a button occurs immediately on hover) click handler source:

const { canvas }=this.$root.$refs.cropper.getResult();
this.preview=canvas.toDataURL(1, 'image/jpeg');

Speaking of examples, could you provide the source of your example, that you posted above?

Its your examples: updateBoundaries
and for horisontal images

later I will make an example with both of them in my layout

[Norserium]

https://user-images.githubusercontent.com/17212759/127096611-bdd8eaae-9857-4609-89f4-b6fff316f054.mp4 (Clicking on a button occurs immediately on hover) click handler source:

Thanks. I assume, that it should be implemented on your side. You can add the indicator right before calling the getResult method, and hide it in the end of the handler (it should be possible, because all the operations in your handler are synchronous).

But I don't recommend to implement the preview in this manner.

First of all, the getting a result as dataURL produces large memory overhead and performance issues, it's better to use toBlob method.

Secondly, there is the much more fast solution: Preview component.

later I will make an example with both of them in my layout

Yes, that's what I want to see. Because you've said before, that the problem reproduces only in your markup, not mine.

[Norserium]

@alexdpts, any news?

[alexdpts]

@alexdpts, any news?

Not yet. No time. Later.

upd. Hmm. Start to make example, and all works fine (no errors in console). So somewhere I have a bug in my code. I will look for. Thanks for your time and for great component.

[Norserium]

@alexdpts, any news?

[Norserium]

@alexdpts, any news?

[Norserium]

@alexdpts, I close this issue. Feel free to reopen if you encounter this problem in the future.

[Norserium]

How can i bind Zoom on mouseWheel+key (eq. Shift+mouseWheel)?

@alexdpts, there is the native possibility now. The example. The more complicated example.