Why can't I access the instance of Cropper JS

Question

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>

Answer 1

Well, I had to make some adjustments but here it is:

Js:

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

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

    reader.onload = function (e) {
      $('#cropImage').attr('src', e.target.result)
    }
    reader.readAsDataURL(input.files[0]);

    reader.onloadend = (function () {
      $('#editPicture').modal('show');
    });
  }
}

$('#editPicture').on('shown.bs.modal', function () {
  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
  });
}).on('hidden.bs.modal', function () {
  cropper.destroy();
  cropper = null;
});

$("#savePicture").click(function () {
  canvas = cropper.getCroppedCanvas({
    width: 160,
    height: 160,
  });

  canvas.toBlob(function (blob) {
    url = URL.createObjectURL(blob);
    var reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = function () {
      var newProfilePic = reader.result;
      console.log(newProfilePic);

      $.ajax({
        type: "POST",
        url: 'requests.php',
        dataType: "json",
        data: {
          imageBlob: newProfilePic,
          action: 'addImage',
        },
        success: function(data){
            console.log(data);
            $('#editPicture').modal('hide');
        }
      });
    }
  });
});

HTML:

<!-- Modal Editar Foto -->
  <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">
          <button type="button" id="savePicture" class="btn btn-primary">Guardar</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="$('#editPicture').modal('hide')">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); ?>" />

        <input type="file" class="d-none" id="customFile" onchange="getPicture(this)"/>
        <label class="btn btn-primary" for="customFile">
            <i class="fa white fa-camera" aria-hidden="true"></i>
        </label>

        <input class="d-none" id="newPicture" value='' type="file" name="newPicture">
      </span>
    </div>
  </div>

This is a functional Cropper Js working. The CSS and the PHP are missing, of course, and you'll need Bootstrap for some adornments.