image crop issue

[rubencool]

I am using your library image crop library. so every thing was fine i was able to crop image. when there was case of image upload i was stuck since it crop an image in based64 format and when i tried to upload image my file forma didn`t match. so what shall i do to upload and image.

<b-modal ok-title="Select" @ok="generateImage" :id="'listOfImage'" title="Upload Profile Image" class="modal-primary" size="sm">

        <croppa v-model="cropImage" id="image"
            :prevent-white-space="true"
            :width="200"
            :height="200"
            :image-border-radius="218">
          </croppa><br />
   </div>
</b-modal>

Below is my javascript code to upload an image to server, import {axiosWithOutAuth} from '../../../utils/axios-common' export default { data () { return { croppa: {} }

generateImage: function () { let url = this.cropImage.generateDataUrl() if (!this.cropImage.hasImage()) { alert('no image') return } const formData = new FormData() formData.append('image', url) formData.append('bus', this.id) axiosWithOutAuth({ method: 'post', url: '/buses/gallery/upload/', data: formData, headers: { 'Authorization': 'JWT ' + localStorage.getItem('user-token'), 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' } }).then(response => { alert('sucessfully uploaded') this.$router.go(this.$router.currentRoute) }).catch(function (error) { console.log(error) }) }

[zhanziyang]

You need to use generateBlob instead of generateDataUrl. Just like what you did in #129 this issue.