getCroppedCanvas generate black image in Chrome after ready except if I had a timeout

[peterpeterparker]

I'm submitting a...

• Support
• Bug report

To be honest, I'm not sure if it's really a bug or just something I do wrong...

Current behavior

I'm chaining the creation of a new Cropper with creating a new image thru getCroppedCanvas().toDataURL when cropper is ready (see code below)

On iOS/Safari everything works like a charm.
Same code, on Android/Chrome, generate a black image.

After searching a solution, I discovered that adding a small 100ms timeout to the call solve the issue on Android/Chrome.

Expected behavior

I would be happy to not solve this by adding a delay.

Minimal reproduction of the problem with instructions

private crop() {
  this.cropper = new Cropper(imgURL, {
        viewMode: 2,
        aspectRatio: 1,
        dragMode: 'move',
        modal: true,
        guides: false,
        highlight: true,
        background: true,
        autoCrop: true,
        autoCropArea: 0.9,
        responsive: true,
        ready: (event: CropperReadyEvent) => {

            this.initFilterSrcImg();
        }
      });
 }
 
 private initFilterSrcImg() {
        let filterCropBox: CropBoxData = this.cropper.getCropBoxData();

        const filterWidth: number = 60;
        const filterHeight: number = filterCropBox.height * filterWidth / filterCropBox.width;

        this.croppedImgFilterSrc = this.cropper.getCroppedCanvas({
            width: filterWidth,
            height: filterHeight
        }).toDataURL('image/jpeg', 0.92);
}

If I encapsulate

            this.initFilterSrcImg();

with a timeout

            setTimeout(() => {
                this.initFilterSrcImg();
            }, 100);

then it works on Android too.

What is the motivation / use case for changing the behavior?

I create this miniature in order to present filters to my user, see video https://web-photo-filter.firebaseapp.com

Browser:

• Chrome (Android) / Same on Android 7.1 and 8.1

[fengyuanchen]

Does this issue still exist with the latest version (v1.3.2 currently)?

[peterpeterparker]

@fengyuanchen just tested again, yes I could definitely confirm that it still exist with latest version v1.3.2

[lfaoanl]

Same problem on Win10/Chrome

[peterpeterparker]

@fengyuanchenI test v1.3.5 and could confirm it's now fixed, timeout workaround isn't needed anymore

thx!