Не удается прочитать свойство toBlob неопределенного при сохранении обрезанного изображения с CropperJS - PullRequest
Новая
       30

Не удается прочитать свойство toBlob неопределенного при сохранении обрезанного изображения с CropperJS

0 голосов
/ 25 сентября 2018

У меня есть код для отправки обрезанного изображения на мой сервер через ajax, как показано ниже: 

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

Мой HTML-код выглядит так: 

<!-- 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>

Я получаю эту ошибку Uncaught TypeError: Cannot read property 'toBlob' of null

Я пробовал другие способы загрузки обрезанного изображения на сервер со страницы CropperJS github по адресу https://fengyuanchen.github.io/cropperjs.

Пожалуйста, помогите.

...