jofftiquez / vue-croppie

Vue wrapper for croppie
https://jofftiquez.github.io/vue-croppie/
MIT License
261 stars 42 forks source link

Bind() as base64 format #36

Closed adefirmanf closed 6 years ago

adefirmanf commented 6 years ago

Any idea how to do this? I'm trying to bind my image as base64. I don't want to upload first before everything was done, so the image return as base64.

I was achieved render as Image in Vue without Croppie. This is my script

 handleAvatarSuccess(res, file) {
        this.success = false;
        this.dialogVisible = true;
        this.imageBytes = file.response;
    },
<img v-if="imageBytes" :src="'data:image/jpeg;base64,'+imageBytes" class="avatar">

PS : I'm using http://element.eleme.io/#/en-US/component/upload

But, when I'm using Croppie. The image just show a gray. This is my script

handleAvatarSuccess(res, file) {
        this.success = false;
        this.dialogVisible = true;
        this.imageBytes = file.response; //base64 Response
// ------------------------------------------------ //
        this.$refs.croppieRef.bind({ 
            url: file.response,
        });
    },
 <vue-croppie 
            ref=croppieRef 
            :enableOrientation="true"
            @result="result"
            @update="update">
        </vue-croppie>

I got error in chrome console :

 Cannot read property 'bind' of undefined
    at VueComponent.handleAvatarSuccess (add:327)

I hope this problem just my mistake but If there's nothing feature about this, I'd glad if I can PR in here. Thank you.

adefirmanf commented 6 years ago

Sorry, my bad. This issue similar with https://github.com/jofftiquez/vue-croppie/issues/33 and I solved my problem Modal Event:open()

open(){
  this.$nextTick(() => {
    this.$refs.croppieRef.bind({
      url: 'http://i.imgur.com/Fq2DMeH.jpg',
     })
  })
}

Thank you.

jofftiquez commented 6 years ago

@adefirmanf Great! Happy coding!