zhanziyang/vue-croppa

OnChooseFile event generateBlob/generateImage empty

Closed this issue · 3 comments

nielslucas commented

pretty much what the title said.

example:

<croppa v-model="img"
	@zoom="generateImage"
	@move="generateImage"
	@file-choose="generateImage"
	@image-remove="generateImage"
></croppa>
<button type="button" @click="generateImage">try</button>

methods: {
    generateImage: function() {
	this.img.generateBlob(
	  blob => {
		console.log(blob); // empty on @file-choose it is empty, any other event is is filled. Also the button click event
	},
	'image/jpeg',
	0.8
	); // 80% compressed jpeg file;
	},
     }
}

Or is it the wrong event that I am using?

MomciloNikolic commented

Why u use image-remove?
Maybe u can use this.

<croppa v-model="myCroppa"
name="croppaLab"
@mousemove="generateImage"
id="avatarPicture"
ref="myCroppaRef"
:width="300"
:height="300"
:prevent-white-space="true"
:show-remove-button="false"
:canvas-color="'#C0C0C0'"
:zoom-speed="5"
@new-image-drawn="generateImage"
:show-loading ="true"
:loading-size ="10"
loading-color = "'#606060'">

methods: {
storeInfo: function() {
let image = this.myCroppa.generateBlob(
blob => {
let formData = new FormData()

      if(this.email != localStorage.usr_email){
      formData.set("usr_email", this.email)
      this.sendParams = true
      }

      if(this.fullnameBase != localStorage.usr_fullname){
      formData.set("usr_fullname", this.fullnameBase)
      this.sendParams = true
      }

      if(this.phone != localStorage.usr_phone){
      formData.set("usr_phone", this.phone)
      this.sendParams = true
      }

      if(blob === null){
      }else{
      formData.set("usr_photo", blob)
      this.sendParams = true
      }
      if(this.sendParams == true){
      api.changeUserData(formData).then(response => {
        // console.log(response.data)
        if (response.data.Result === "OK") {
          localStorage.setItem("usr_fullname", this.fullnameBase)
          localStorage.setItem("usr_email", this.email)
          localStorage.setItem("usr_phone", this.phone)
          blob = this.myCroppa.generateDataUrl()
          this.imgUrl == blob
          // console.log(this.imgUrl)
          
          localStorage.setItem("usr_photo", this.imgUrl)
           location.reload();
        
        }
     
      })}
    },
    "image/jpeg",
    1
  )
}

,generateImage: function() {
let url = this.myCroppa.generateDataUrl()
if (!url) {
return
}

localStorage.removeItem("usr_photo")
localStorage.usr_photo = this.myCroppa.generateDataUrl()
this.imgUrl = localStorage.usr_photo
}

nielslucas commented

@MomciloNikolic that is 100% unhelpfull. You are not describing what your code does and for what I see it has totally nothing to do with what I am asking for. You ask why i use the remove event, because I want to update the blob value to the parent when you remove a image. Otherwise you would delete it, but there will be no event send to parent with a 'null' value. So the parent still got the previous value (if there was a blob before);

zhanziyang commented

@nielslucas sorry about the late reply. When file-choose event fired the image is not yet drawn on the canvas so the blob is empty. new-image-drawn is the right event you should use.

  • 👍2