Как просмотреть и обрезать изображение с помощью croppie после отправки формы - PullRequest
Новая
       34

Как просмотреть и обрезать изображение с помощью croppie после отправки формы

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

Я видел примеры того, как обрезать изображение с помощью 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>
...