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,
},
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
aleksKamb had the right solution. After applying indexes it appears to be working. I edited the v-for to:
<div v-for="(image, index) 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(index)">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>
And then I edited the cropping function to:
crop(index) {
const { canvas } = this.$refs.cropper[index].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');
}
},