Possible to use without upload functionality?

[titusdecali]

I'd like to get the file blob and then send it through an axios method that lives inside of Vuex, however I'm having trouble getting the file blob. I console logged each event, but don't see it there.

How can I access the cropped file to use it with my own uploader?

[ferretwithaberet]

There is the upload-handler prop to which you pass a function which takes a cropper.js instance. With the cropper.js instance you can then use .getCroppedCanvas(options) which results in a HTMLCanvasElement, this object has a toBlob method. You can see this whole process being done in the source here.

[titusdecali]

@ferretwithaberet Thanks for that info. It might be nice to have this in the docs so that people don't have to hunt for it.

For anyone else that wants a more concise answer:

<avatar-cropper v-model="showAvatarModal" :upload-handler="uploadFile" />

methods: {
    uploadFile(cropperInstance) {
      const payload = cropperInstance.getCroppedCanvas().toDataURL('image/jpeg')
      
      this.$store.dispatch('UPLOAD_AVATAR', payload)
    }
 }

NOTE: Adding 'image/jpeg' to toDataURL solved some upload problems I had as toDataURL defaults to 'image/png' and it was only working with jpeg files until I switched it to the above. This may have been a server-side issue, so your results may vary.