I have a crop function for Vue Advanced Cropper similar to the one below:
crop() {
const { canvas } = this.$refs.cropper.getResult();
if (canvas) {
const form = new FormData();
canvas.toBlob(blob => {
form.append('files[]', blob);
// Maybe consider setting the appropriate file format here
}, 'image/jpeg');
this.formData = form;
}
},
This is how I've structured 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 made sure to include the import statement for Cropper:
import {Cropper} from 'vue-advanced-cropper'
The version specified in package.json is:
"vue-advanced-cropper": "^2.8.1"
Although everything seems to be working fine, I encounter the following error message within the crop function:
Uncaught TypeError: this.$refs.cropper.getResult is not a function
Initially, I thought that it could be related to iterating through multiple images, however, the issue persists even with just one image. I attempted to combine the upload to server functionality as shown in the tutorial here:
--- Edit ---
I also have export default set up, and while cropping works fine, I am unable to retrieve the results:
export default {
components: {
Cropper,
},