Vue.js vue-advanced-cropper error

[pwangai]

When I select an image it is continuously cropping the image in a loop until it can't crop anymore. I am getting this error in my logs

app.js:81265 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

[Norserium]

Hello, @igogoson! I suppose, that you use the same variable for src prop and for storing the cropper result. You shouldn't do it, because you will get the recursion.

[TitanFighter]

Just had the same issue.

What I have:

// Upload file
<b-form-file
    v-model="avatarFile"
    :state="Boolean(avatarFile)"
    accept="image/jpeg, image/png, image/gif"
/>

// Convert uploaded file to Base64 and give it to Cropper
const reader = new FileReader()
reader.onload = e => {
    console.log('It fires second')
    this.imageToCropLinkOrBase64 = e.target.result
}
console.log('It fires first')
reader.readAsDataURL(this.avatarFile)
this.$bvModal.show('avatar-cropper-modal')

// Cropper
<b-modal
    id="avatar-cropper-modal"
    title="Create User"
    @ok="addNewUser"
>
    <cropper
        classname="cropper"
        :src="imageToCropLinkOrBase64"
        :stencil-props="{ aspectRatio: 10/12 }"
        @change="change"
    />
</b-modal>

The problem is within Converter code. I upload an 2.5MB image. The image has not uploaded, but modal with cropper already opened (i.e. opened without image). So, I needed to move modal opening inside reader.onload, like this:

reader.onload = e => {
    this.imageToCropLinkOrBase64 = e.target.result
    this.$bvModal.show('avatar-cropper-modal')
}

This fixed the issue.

[Norserium]

@TitanFighter, are you saying, that you has the following error?

app.js:81265 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

Have you encountered the recursive cropping?

[TitanFighter]

are you saying, that you has the following error?

Yes

Have you encountered the recursive cropping?

No. Maybe because I save cropped image to this.croppedImage, not shown above.

[Norserium]

No. Maybe because I save cropped image to this.croppedImage, not shown above.

It makes your issue different than issue of @igogoson, and I still should investigate it carefully. I would be grateful for codesandbox that reproduces your problem.

[pwangai]

My problem comes when I do at @change="onChange". I can not read the canvas and yet I am using the exact code on your documentation. The image crops infinitely and I get the following error [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'toDataURL' of undefined"

my onChange function is

onChange({coordinates, canvas}) {
this.coordinates = coordinates
// You able to do different manipulations at a canvas
// but there we just get a cropped image
this.image = canvas.toDataURL()
}

and cropper looks like this

<Cropper
classname="upload-example-cropper"
:src="image"
@change="onChange"
/>

[pwangai]

Here is the link to the code. when I add @change method this happens

https://codesandbox.io/embed/vue-advanced-cropper-rotate-bio7o?fontsize=14&hidenavigation=1&theme=dark

[TitanFighter]

@Norserium this is the demo you requested.

In codesandbox it works. I even tried to upload 10 mb photo + additionally tried to simulate a delay using setTimeout - still works :)

Probably I will be able to play a bit more locally with my project during the upcoming weekend in order to double-check the problem and inform you about the result.

[Norserium]

@igogoson, there is an error in your codesandbox.

Pay attention, you use the this.image as the source image:

<Cropper class="upload-example-cropper" :src="image" @change="onChange"/>

But you put the result in the same variable:

onChange({coordinates, canvas}) {
	this.coordinates = coordinates
	// You able to do different manipulations at a canvas
	// but there we just get a cropped image
	this.image = canvas.toDataURL()
},

So, it lead to infinite recursion. You update the source image on change, then the cropper gets the updated image and crop it again, and etc.

You shouldn't use the same variable for result image and source. Compare your sandbox with this sandbox.

[Norserium]

@TitanFighter, thank you! If you succeed and catch the reason of this bug, please inform me.

[TitanFighter]

@Norserium I created a local freshly new project with the code from my linked demo - everything is ok. Probably my current project related issue, so in case if I catch this problem again - I will be back with more details.

[Norserium]

@TitanFighter, thank you! Keep me informed.

[Norserium]

@TitanFighter, @igogoson I close this issue, but if you encounter this problem in the future, feel free to write here.