Why can't I access the instance of Cropper JS

I’m having trouble running the loadImage() function because I can’t access the variable cropper. My final goal here is to run the cropper.getCroppedCanvas and store its returned value into an input so I can send it via AJAX.

I’m trying to get this mentioned value by clicking on the savePicture button.

I have the following JS code:

var imageToCrop = document.getElementById('cropImage');


$('#editPicture').on('shown.bs.modal', function () {
  sourceActualPic = $('#actualPicture').attr('src');
  $('#cropImage').attr("src", sourceActualPic);
  iniciarCropper();
}).on('hidden.bs.modal', function () {
  var newPic = cropper.getCroppedCanvas({
    fillColor: '#ffffff'
  }).toDataURL();
  console.log(newPic);
  cropper.destroy();
  cropper = null;
});

function iniciarCropper() {

    var cropper = new Cropper(imageToCrop, {
    viewMode: 2,
    dragMode: 'none',
    aspectRatio: 1 / 1,
    autoCropArea: 1,
    guides: true,
    cropBoxMovable: true,
    cropBoxResizable: true,
    minCropBoxWidth: 300,
    minCropBoxHeight: 300,
    toggleDragModeOnDblclick: false,
    modal: false
  });

  $('#savePicture').on('click', function () {
    loadImage();
  });

  setTimeout(function () {
    $('#savePicture').click();
  }, 100);

  var loadImage = function () {
    var newPic = cropper.getCroppedCanvas({
      fillColor: '#ffffff'
    }).toDataURL();
    document.getElementById('newPicture').value = newPic;
  }
}

Here’s my HTML:

  <div class="modal" tabindex="-1" role="dialog" id="editPicture">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Edite su </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body justify-content-center" id="cropArea">
           <div class="imageContainer">
            <img src="" alt="" id="cropImage">
           </div>
        </div>
        <div class="modal-footer">
          <label class="btn btn-primary" for="customFile">
            <i class="fa white fa-camera" aria-hidden="true"></i>
          </label>
          <input type="file" class="d-none" id="customFile" onchange="getPicture(this)"/>
          <button type="button" id="savePicture" class="btn btn-primary">Guardar</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Fin Modal  -->

  <h2 class="profile-subtitle"><?php echo l('You profile picture'); ?></h2>
  <div class="row">
    <div class=" col-md-12 profilePicture">
      <span>
        <img id="actualPicture" src="<?php echo getImg('users', $user->slug, 'extramedium', $avatarAPIsource); ?>" />
        <button type="button" data-toggle="modal" class="btn btn-danger editPicture" data-target="#editPicture"><i class="fa white fa-pencil fa-lg" aria-hidden="true"></i></button>
        <input class="d-none" id="newPicture" value='' type="file" name="newPicture">
      </span>
    </div>
  </div>

122 thoughts on “Why can't I access the instance of Cropper JS”

  1. Hello there, I discovered your web site via Google whilst searching for a comparable topic, your
    website came up, it seems good. I’ve bookmarked it in my
    google bookmarks.
    Hi there, simply was alert to your blog via Google, and located that it’s really informative.
    I am going to be careful for brussels. I will appreciate if you proceed this
    in future. Numerous folks shall be benefited from your writing.

    Cheers! http://ciaalis2u.com/

    Reply

Leave a Comment