I have a crop function for Vue Advanced Cropper like this:
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; } },
My 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>
I have included the import for Cropper:
import {Cropper} from 'vue-advanced-cropper'
Version from package.json:
"vue-advanced-cropper": "^2.8.1"
Everything works until I get to the crop function where it says the following:
Uncaught TypeError: this.$refs.cropper.getResult is not a function
My first thought was, that it may have something to due with looping through multiple images, however it does not work with juse one either. I have tried combining the part from disc and upload to server from here: https://norserium.github.io/vue-advanced-cropper/guides/recipes.html#upload-image-to-a-server
— Edit —
I have export default also, and cropping works, just not getting the results:
export default { components: { Cropper, },
Advertisement
Answer
Considering that you are using the same ref name for each element in your v-for it might be possible that this.$refs.cropper is an array. This depends on your version of Vue as well. If that’s the case you might have to pass a parameter to your crop function so that the index of the invoking element is known and getResult can be called correctly.
Try console logging this.$refs. Also maybe see if this thread is useful? Vue.js ref inside the v-for loop