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:

user_6115909 · Answer

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:

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

Why can't I access the instance of Cropper JS

1 Answers