Cropper no Ionic Vue

Asked

Viewed 9 times

0

I’m developing an app with Ionic using Vue. The user takes a photo, (I’m using the Capacitor.js Camera plugin). So far everything works. But I need to cut the image to always be square (It will be avatar photo). But I found very few solutions.

Photo.Vue (template)

<ion-img v-if="photo" :src="photo"></ion-img>
<ion-button @click="getPhoto('photo')">Tirar foto</ion-button>

Photo.Vue (script)

import { Plugins, CameraResultType } from '@capacitor/core';
const { Camera } = Plugins;

...

methods : {
async getPhoto() {

    const image = await Camera.getPhoto({
        quality: 90,
        allowEditing: true,
        resultType: CameraResultType.Uri
    });
                
    this.photo = image.webPath; // Esta foto precisa ser cortada a partir de agora

}

Using the traditional (web) Vue.js Cropper components does not work for Ionic (Android, iOS), and the capacitor.js solution itself works with Angular or React only. So I still need a Cropper solution for Ionic Vue.

Any help is welcome. Thank you!

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.