Coordinates do not clear properly when using Firefox

[Willdta]

When uploading an image the first time, it works as expected. When uploading another image consecutively after, the coordinates do not clear properly. Left and top coordinates become NaN and height and width stay the same.

On Chrome, coordinates clear properly each time.

[Norserium]

Hello!

I've just tested this scenario and it is processed correctly.

Could you test uploading images at this example? What's the uploading images? What's the version of Firefox do you use?

[Willdta]

The version of Firefox I'm using is 69.0.1. The images are just regular PNG's, JPG's, JPEG's. I used the exact method you linked in the first place.

After further investigation, it seems like it clears at first but once my image is actually saved to the db, the coordinates mess up.

[Norserium]

Let's define. Does this problem occur in my examples or this problem is specific to your code only? In the second case me need additional details about your code or an example at the codesandbox.

[Willdta]

Let's define. Does this problem occur in my examples or this problem is specific to your code only? In the second case me need additional details about your code or an example at the codesandbox.

Do you want anything specific in terms of my code?

[Norserium]

First of all, I want to know, could you reproduce this problem at the documentation examples.

Secondly, if it's not possible, me need details about your specific case. Maybe, code that uses this library or something else.

[Willdta]

1. No, I could not.

2. When uploading the image I'm using the code you listed in the documentation. When clearing the input, I'm setting my image to null and my coordinates back to 0. Maybe I'm not correctly resetting my state? Here's what I'm using to reset it:

this.coordinates = { left: 0, height: 0, top: 0, width: 0}
this.uploadedPhoto = ""
this.croppedPhoto = null

I have also noticed these errors but I don't know if it's of any help:

[Norserium]

Could you provide more code? What is this here? What's props do you send to cropper?

[Willdta]

Could you provide more code? What is this here? What's props do you send to cropper?

this is in reference to my local component data.

Cropper component:

<cropper
  :src="uploadedPhoto"
  class="cropper"
  @change="cropImage"
/>

cropImage method (using TypeScript):

cropImage({ coordinates, canvas }: {
    coordinates: { width: number, height: number, left: number, top: number },
    canvas: HTMLCanvasElement
  }) {
    this.coordinates = coordinates;
    canvas.toBlob(blobData => {
      this.croppedPhoto = blobData;
    })
  }

[Norserium]

And what's happening with uploadedPhoto?

[Willdta]

And what's happening with uploadedPhoto?

Exactly what is in your docs when uploading a photo.

[Norserium]

Try to update to 0.12.4. I suppose, that the cause of this issue is incorrect handling of setting empty src prop value, and I've fixed this bug in the new version.

[Willdta]

Try to update to 0.12.4. I suppose, that the cause of this issue is incorrect handling of setting empty src prop value, and I've fixed this bug in the new version.

This fixed it!

There are some type errors I thought you should know about though:

[Norserium]

Canvas is undefined if src prop is empty. Maybe it's not obviously, but sending an empty canvas value is not the best solution too.

There is temporary fix:

cropImage({ coordinates, canvas }: {
    coordinates: { width: number, height: number, left: number, top: number },
    canvas: HTMLCanvasElement
  }) {
    this.coordinates = coordinates;
    if (canvas) {
      canvas.toBlob(blobData => {
        this.croppedPhoto = blobData;
      })
   } else {
      this.croppedPhoto = null;
   }
}

[Willdta]

Canvas is undefined if src prop is empty. Maybe it's not obviously, but sending an empty canvas value is not the best solution too.

There is temporary fix:

cropImage({ coordinates, canvas }: {
    coordinates: { width: number, height: number, left: number, top: number },
    canvas: HTMLCanvasElement
  }) {
    this.coordinates = coordinates;
    if (canvas) {
      canvas.toBlob(blobData => {
        this.croppedPhoto = blobData;
      })
   } else {
      this.croppedPhoto = null;
   }
}

Awesome man. Thanks so much for helping me out. I really appreciate it!

[Norserium]

You are welcome!