title: Cannot read property toBlob of undefined when saving a cropped image with CropperJS
body: <p>I have a code to send the cropped image to my server through ajax like below:</p>
  
  <pre><code>function saveCrop(){
  var img = document.querySelector("#banner_image_preview");
  var cropper = new Cropper(img);
  
  cropper.getCroppedCanvas().toBlob((blob) =&gt; {
      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');
        },
      });
    });
  }
  </code></pre>
  
  <p>My html is this:</p>
  
  <pre><code>&lt;!-- Modal --&gt;
  &lt;div id="myModal" data-modal-id="cropImage" class="modal"&gt;
    &lt;div class="modal-content"&gt;
        &lt;img class="" id="banner_image_preview" src="img/banner.jpeg"&gt;  
    &lt;/div&gt;
    &lt;div class="modal-footer" style="border: none !important;" id="alert_footer"&gt;
          &lt;center style="float: left;display: block;width: 100%;"&gt;
              &lt;button id="alert-btn" class="btn btn-primary" onclick="saveCrop()"&gt;
                  Save
              &lt;/button&gt;
          &lt;/center&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I keep getting this error <code>Uncaught TypeError: Cannot read property 'toBlob' of null</code></p>
  
  <p>I have tried other methods of uploading cropped image to the server from the CropperJS github page at <a href="https://fengyuanchen.github.io/cropperjs" rel="nofollow noreferrer">https://fengyuanchen.github.io/cropperjs</a>.</p>
  
  <p>Kindly assist.</p>