Croppie: DOMException 'drawImage' on 'CanvasRenderingContext2D' in Chrome & Safari

[orif-jr]

Expected Behavior

When using croppie.js in combination with ng-croppie.js together should be working in Chrome or Safari.

Actual Behavior

Croppie throws endless uncaught DOMException.
Since new release of the Chrome 66 croppie.js throws constantly errors while working with ng-croppie library. In previous Chrome versions (tested on 65, 64 etc.) everything worked fine, but with the new Chrome release it hanging out on:

LOC 1179 for v2.6.2
ctx.drawImage(this.elements.preview, left, top, width, height, startX, startY, canvasWidth, canvasHeight);

LOC 1188 for v2.5.1
ctx.drawImage(this.elements.preview, left, top, Math.min(width, self._originalImageWidth), Math.min(height, self._originalImageHeight), startX, startY, outWidth, outHeight);

Error Description
Uncaught (in promise) DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

The same code running in other browsers (tested on Firefox v59.0.2 and Internet Explorer v11.0.56) does not throw above mentioned error.

Steps to Reproduce the Problem

1. include croppie.js
2. include ng-croppie (v1.2.2)
3. instantiate angular 1.x app

Example Link

• Link: https://codepen.io/tonii/pen/GdmGWX

Specifications

• Browser: Chrome 66.0.3359.139 or Safari 11.1.2
• Version: either 2.5.1 or 2.6.2

[thedustinsmith]

Thanks for the detailed submission. The error seems to be pretty self explanatory, but I don't know why it's occurring.

Can you try throwing some console.logs in croppie.js?

I'd be interested in seeing if you get into _transferImageToCanvas: https://github.com/Foliotek/Croppie/blob/master/croppie.js#L1133
console.log(this.elements.preview.width, this.elements.preview.height)

Just as a sanity check and timing check maybe one right before the exception:
https://github.com/Foliotek/Croppie/blob/master/croppie.js#L1172
console.log(this.elements.preview.width, this.elements.preview.height)

[lacek]

I have encounter the same error when using another unrelated project from CreateJS.

The example link by @orif-jr above only shows error in Google Chrome 66 on Windows, but not MacOS.
I have updated Chrome to 66.0.3359.181 and the same error still occurs.

[orif-jr]

@thedustinsmith, console logs also show 0 for elements height and width at L1133 and L1172.
Btw, I also have checked it with latest Chrome version (66.0.3359.181) and can confirm @lacek's comment regarding error occurence in newest Chrome.

Update: 13.11.2018
The same applies to Chrome 70.0.3538.102
Update: 25.09.2018
The same applies to Chrome 69.0.3497.100 and Safari 12.0 (13606.2.11)
Update: 02.08.2018
The same applies to Chrome 68.0.3440.84 and Safari 11.1.2
Update: 13.07.2018
The same applies to Chrome 67.0.3396.99
Update: 19.06.2018
The same applies to Chrome 67.0.3396.87
Update: 04.06.2018
The same applies to Chrome 67.0.3396.62

[j0u135]

I have the same error usnig fabric.js, Chrome 67. Firefox does not present this problem.

[rottesindhuri]

i have the same error. any solutions for this?

[patilswapnil]

@j0u135 Did you got any solution? I have the same error on fabric.js 1.7.11 and chrome 68.0.3440.106

[j0u135]

@j0u135 Did you got any solution? I have the same error on fabric.js 1.7.11 and chrome 68.0.3440.106

I was using amCharts that relies on fabric.js, after updating amCharts to the latest version the error disappeared.

[patilswapnil]

@j0u135 Did you got any solution? I have the same error on fabric.js 1.7.11 and chrome 68.0.3440.106

I was using amCharts that relies on fabric.js, after updating amCharts to the latest version the error disappeared.

thanks

[linkinlu]

No one can solve this issue ?
I've also got this issue on chrome 68.0.3440.106 (正式版本) （64 位） (cohort: Stable)
Error Message:
Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0

[linkinlu]

No one can solve this issue ?
I've also got this issue on chrome 68.0.3440.106 (正式版本) （64 位） (cohort: Stable)
Error Message:
Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0

Sorry , I just update frabric.js , everything is working ok.