Vue 3: Composition API

[ilyaDegtyarenko]

How to use with composition api? (vue 3)

P.S. Nuxt 3

[Norserium]

@ilyaDegtyarenko, I don't see any thing that would be specific for this cropper if you will use Composition API. Try, for example, this sandbox.

[ilyaDegtyarenko]

Thank you, you are right

[Norserium]

@ilyaDegtyarenko, you are welcome!

[ghost]

@Norserium
I would like to express my gratitude for the example code that you provided.However, I am currently facing an issue with manipulating, rotating, and flipping images using the Composition API.
I tried using the following code snippet:

const cropper = ref(null)
const zoom = () => {
    cropper.zoom(2)
}
const flip = (x, y) => {
    cropper.flip(x, y)
}
const rotate = (angle) => {
    cropper.rotate(angle)
}

Unfortunately, it did not work as expected. Could you please provide some guidance on how to properly manipulate, rotate, and flip images using the Composition API in Vue 3? Any help or suggestions would be greatly appreciated.

[ghost]

I followed the example from the Docs:

<Cropper
    ref="cropper"
    :src="image.src"
    :stencil-size="{
        width: 255,
        height: 255,
    }"
    :canvas="{
        height: 255,
        width: 255,
    }"
    @change="resule"
/>

How should I use it in the template? I want to achieve the zoom buttons in the example, is there any related example for that? Thank you again.

[Norserium]

@orzcyt, I've created the example for you.

[ghost]

Thank you for your reply, I understand that these buttons need to be created manually outside. In this Docs example, it looks like these buttons are built-in to the Cropper component, and the example does not give a way to implement them, which may cause some confusion. It would be better if you could write more details. Thank you again for your contribution.

[Norserium]

@orzcyt, thank you for your feedback. I always appreciate it, because I can't see my examples by user eyes. Is your issue solved now?

[ghost]

I have solved the problem. It would be nice if cropper could embed the buttons into the cropper component like in the example, using slot or something similar.