Cannot read property toBlob of undefined when saving a cropped image with CropperJS

Question

I have a code to send the cropped image to my server through ajax like below:

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');
      },
    });
  });
}

My html is this:

<!-- Modal -->
<div id="myModal" data-modal-id="cropImage" class="modal">
  <div class="modal-content">
      <img class="" id="banner_image_preview" src="img/banner.jpeg">  
  </div>
  <div class="modal-footer" style="border: none !important;" id="alert_footer">
        <center style="float: left;display: block;width: 100%;">
            <button id="alert-btn" class="btn btn-primary" onclick="saveCrop()">
                Save
            </button>
        </center>
    </div>
</div>

I keep getting this error Uncaught TypeError: Cannot read property 'toBlob' of null

I have tried other methods of uploading cropped image to the server from the CropperJS github page at https://fengyuanchen.github.io/cropperjs.

Kindly assist.

Answer 1

I think what you needed to do is window.saveCrop = function() instead of function saveCrop():

`window.saveCrop = function() {

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');
     },
   });
  });
 }`