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”