Show full size image after a rotation

[stanleyxu2005]

I'm facing the same issue here.

Just take this official demo as example
https://codesandbox.io/s/vue-advanced-cropper-preview-experimental-fixed-aspect-ratio-eo9ed?file=/src/App.vue

The image is width=540, height=841 (rectangle)
After the image is rotated, the visiable area becomes a square.

Is it possible to make the image to be shown as "contain" mode, so that it is still show the full image, just like this?

[Norserium]

@stanleyxu2005, that's how the default rotate algorithm works. It tries to preserve the original cropped area on rotate as much as it possible.

Let's try to make clear what you want to get. What if, for example, the image was already zoomed and you rotate it?

[stanleyxu2005]

Hi @Norserium. Thank you for the quick response.

I'd like still to see the full image after a rotation, like this

I can adjust the zooming to see full image by scrolling mouse wheel. But when I programmatically set the zoom out, it does not seem to work

rotateAndFixImageSize() { 
      this.$refs.cropper.rotate(90)
      this.$refs.cropper.zoom(0.5) // attempt to fix image size
}

[Norserium]

@stanleyxu2005, I got it. This behavior can be easily over-defined in the future major version, but currently it's pretty tough task. How important is this issue for you? By the way, what's version Vue do you use?

[stanleyxu2005]

I tried to fiddle with imageClass, foregroundClass etc., but no luck. So I guess tweak zoom might work. As it is a tough task confirmed by repo owner, then I have to wait. :D

BTW, I'm currently using Vue 2. But I dont see any challenges if I switch projects to Vue 3.

[Norserium]

BTW, I'm currently using Vue 2. But I dont see any challenges if I switch projects to Vue 3.

I'm just going to support only Vue 2.7 / Vue 3 in the future due to using of Composition API under the hood in the new major release.

[stanleyxu2005]

I managed to use the following code as a workaround.

rotateAndFixImageSize() { 
    this.$refs.cropper.rotate(90)
    setTimeout(() => {
        this.resetImageSize()
    }, 500)
}

resetImageSize() {
    this.$refs.cropper.zoom(0.001)
}

Looking forward to your next major version

[hanzhenfang]

What about this problem now？I face the same issue.

[Norserium]

@hanzhenfang, I assume you want to get something like this in react-advanced-cropper?

[hanzhenfang]

I did it from the other side， when I first load the Cropper component, I will record an object named "primitiveStencilRect". It is assigned on the "defaultSize" props callback first invoked.

then I will use it for every rotate event.

tips: pay attention to the "width" and "height" at different degrees.😄

[hanzhenfang]

Hope some help for somebody.

[hanzhenfang]

@Norserium Thanks you also for you reply~😊