Cannot read property to blob of undefined when saving cropped image

[goodhands]

I'm submitting a...

[x] Bug report 

Current behavior

I keep getting this error "Uncaught TypeError: Cannot read property 'toBlob' of null" when I try to save my cropped image. I have a button to allow users save the cropped image after making their selection.

Expected behavior

I expected the cropped image to be submitted to my server through ajax

Minimal reproduction of the problem with instructions

`function saveCrop(){ var img = document.querySelector("#banner_image_preview"); var cropper = new Cropper(img);

cropper.getCroppedCanvas().toBlob((blob) => {
    const formData = new FormData();

    formData.append('croppedImage', blob);

    $.ajax('include/product_misc.php', {
      method: "POST",
      data: formData,
      processData: false,
      contentType: false,
      success(result) {
        console.log('Upload success');
        console.log(result);
      },
      error() {
        console.log('Upload error');
      },
    });
  });

}`

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

Environment

Cropper version: X.Y.Z


Browser:
- [xx] Chrome (desktop) version XX

Others:

[fengyuanchen]

The browser you were using does not support canvas.toBlob API, you should include a polyfill for it.