J'ai une fonction de recadrage avec Vue Advanced Cropper comme indiqué ci-dessous :

crop() {
            const { canvas } = this.$refs.cropper.getResult();
            if (canvas) {
                const form = new FormData();
                canvas.toBlob(blob => {
                    form.append('files[]', blob);
                    // Perhaps you should add the setting appropriate file format here
                }, 'image/jpeg');

                this.formData = form;

            }

        },

Mon HTML :

<div v-if="cropView">
    <h1>Step 2: Crop images</h1>
    <div class="upload-example__cropper-wrapper">
        <div v-for="image in this.images" :key="image">
            <cropper ref="cropper" class="upload-example__cropper"
                     check-orientation :src="image.src"/>
            <button v-if="image.src" class="upload-example__button" @click="crop">Crop</button>
            <!--<div class="upload-example__reset-button" title="Reset Image" @click="reset()"></div>-->
            <div class="upload-example__file-type" v-if="image.type">
                {{ image.type }}
            </div>
        </div>
    </div>
</div>

J'ai inclus l'importation pour Cropper :

import {Cropper} from 'vue-advanced-cropper'

package.json :

"vue-advanced-cropper": "^2.8.1"

Tout fonctionne bien jusqu'à ce que j'arrive à la fonction de recadrage où il est indiqué ce qui suit :

Uncaught TypeError : this.$refs.cropper.getResult n'est pas une fonction

Ma première pensée a été que cela pourrait avoir quelque chose à voir avec la mise en boucle de plusieurs images, mais cela ne fonctionne pas non plus avec une seule image. J'ai essayé de combiner les parties du disque et de les télécharger sur le serveur à partir d'ici : https://norserium.github.io/vue-advanced-cropper/guides/recipes.html#upload-image-to-a-server

---Modifier ---

J'ai aussi des paramètres d'exportation par défaut et le recadrage fonctionne, je n'obtiens tout simplement pas les résultats :

export default {

    components: {
        Cropper,
    },