Rotate image

[advanced-cropper]

Rotate image

[Norserium]

Unfortunately, there is not native support of this feature, but I perhaps will implement one in the future releases.

Now you can use perhaps not efficient, but working approach, that is illustrated at this example.

[Norserium]

@Lejla94, yes, it's. It's actually used by Preview component alike.

[Norserium]

Hello, @GhaniHaa!

Do you want to rotate an image inside the cropper or rotate the result will be enough?

[GhaniHaa]

both of them, it is possible ?

[GhaniHaa]

Thanks for your help mate.

anyway nice pic

[Norserium]

You are welcome!

[Norserium]

@GhaniHaa, the native rotation was added in 0.19.0. The rotate / flip example (the codesandbox).

[Lejla94]

Hello Norserium.
I got a picture that i flip with:
this.$refs.cropper.flip(true, false);
but when the user changes the route or the picture the image is not flipped on the same way.
So it was once flipped and it should be shown flipped on these conditions.
It should persist.
On my use case i have a preview that stays flipped, but the cropper not and it confuses.
Thanks.

Is there an attribute for this use case?

[Norserium]

@Lejla94, could you provide the codesandbox that reproduces your issue?

[Lejla94]

Hello Norserium.
I got a preview of the image and the cropper on the same page.
When the user clicks a button:

function setMirrorImage() {
  if(mirrorImageStyle.value === '') {
    mirrorImageStyle.value = 'transform: scaleX(-1);'
  } else {
    mirrorImageStyle.value = '';
  }
  this.$refs.cropper.flip(true, false);
}

then the style of the preview image changes.
And the cropper flips.
But then the user clicks on another image, the preview is still mirrored, but the cropper not.

Here is a sandbox: example

Click the images and the rotation does not persist.
if i have a preview of that image that i rotate it stays that way, but the cropper not.
By preview i mean the image shown on the site and not on the cropper.
I see the cropper refreshes when the image changes.
Thanks

[Norserium]

@Lejla94, I assume your codesandbox is not full (there is not the code presented in the last message). But why don't you use Preview component? The example.

[Lejla94]

The issue there is:

1. i do not have a variable to send to the backend when the image is mirrored.
   I need to use the images on my backend too.
2. i need when the image is saved on a variable to have a preview on another route, so i need all the coordinates and stuff.

Question: Is there a variable on the image coordinates to show the image is mirrored?
i will check that question and come back to you.
Thanks for your help.

[Lejla94]

there is a flip on the image object,
i will use that.
Thanks for your help.

[Lejla94]

@Norserium
Look at this sandbox
when the aspect ration is not 1 (one) the Preview does not show well!!
I want to keep the aspect ratio on the preview too, by setting only width on css or the element.
Thanks.

[Lejla94]

Is there a way to use object-fit: contain; on the image?

[Norserium]

@Lejla94, if I understood you correctly, do you want to get something like this? I don't see the point to set only the width, because you have the static aspect ratio and the height is clearly determined by the width in this case.

[Lejla94]

Yes, but the aspect ratio will change and the Preview should keep it

[Lejla94]

The aspect ratio changes based on the user input values, then the user chooses a part of the cropper that will reflect in the Preview.
So the Preview will keep a max width and object-fit: contain; so it will scale to fit the max size, but keeping aspect ratio.

[Norserium]

@Lejla94, let's do it step by step. You can pretty easy set the width and height in the template. The example. But I assume it's not fit to your needs. Am I right?

[Lejla94]

I tried this before, so the only issue is i can not change the Preview with breakpoints.
I should keep a variable as max size.
But if i find no solution, i will scale it on the css or something to make it look bigger on PC and let 320 on small devices.
Thanks for your effort, if there is someway i could help tell me. (by contributing to the project)

[Norserium]

@Lejla94, well, nothing is impossible. There is the old-school trick. You can use aspect-ratio property instead if browsers supported by you support it.

[Lejla94]

I am trying that now.
Thanks