Possible to use without upload functionality? about vue-avatar-cropper HOT 2 CLOSED

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.

from vue-avatar-cropper.

@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.

from vue-avatar-cropper.