提交表单后如何使用裁切预览和裁切图像

Question

我已经看到了如何使用Croppie裁剪图像的示例，但是找不到从表单提交的图像被裁剪的示例。我试图将图像的base64版本传递给croppie对象，但没有任何反应。这是我的下面的代码

JS
var imageURL;

function readURL(input) {
if (input.files && input.files[0]) {
  var reader = new FileReader();

  reader.onload = function(e) {
    $('#previewBannr').attr('src', e.target.result);
  }

  reader.readAsDataURL(input.files[0]);
}


 }

  $("#vanilla").change(function() {
    imageURL = readURL(this);
  });

   var el = document.getElementById('previewBannerDiv');
     var vanilla = new Croppie(el, {
         viewport: { width: 300, height: 300 },
         boundary: { width: 300, height: 300 },
         showZoomer: true,
         enableOrientation: true
     });
 vanilla.bind({
     url: imageURL,
       orientation: 4
 });
 //on button click
 vanilla.result('blob').then(function(blob) {
     // do something with cropped blob
 });

HTML
<div class="form-group">
    <label for="formGroupExampleInput">Banner Image</label>
    <small id="bannerDesc" class="align-left form-text text-muted">
        <span id="forBannerDimensions"></span>
    </small>
    <br>
    <input type='file' required="" id="vanilla" name='banner' class='dealBanners'/>
</div>

<div class="form-group">
    <div class="col-lg-12" id="previewBannerDiv">
    </div>
</div>