使用 CropperJS 保存裁剪图像时无法读取未定义的 toBlob 属性答案

【问题标题】：Cannot read property toBlob of undefined when saving a cropped image with CropperJS使用 CropperJS 保存裁剪图像时无法读取未定义的 toBlob 属性
【发布时间】：2018-09-25 11:15:21
【问题描述】：

我有一个代码可以通过 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 将裁剪后的图像上传到服务器。

请提供帮助。

【问题讨论】：

undefined（标题）与null（错误）不同
函数中唯一会返回null的部分：if (!this.ready || !window.HTMLCanvasElement) { return null; }

标签： javascript html ajax cropper cropperjs

【解决方案1】：

我认为你需要做的是window.saveCrop = function() 而不是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');
     },
   });
  });
 }`

【讨论】：