I can only seem to export a zoomed "top-left" view

[rdwebdevel]

We want square images, preferably at print quality, from user uploads. So, ideally, our preview box (which is roughly 175x175 pixels) will allow users to upload an image, crop a square out of it, and save.

The utility seems to be working great on the front end, and it's passing base 64 encoded data to PHP, which I then convert to a file. However, no matter what the elected crop is, the script seems to pass data the literal 175x175 pixel selection, always zoomed to the top left.

I'm calling croppit with: $('.image-editor').cropit({

      imageBackground: true,
          initialZoom: 'image',
          maxZoom: 3.5,
          type: 'image/jpeg',
          quality: 1,
          minZoom: 'fill',
          onImageLoaded: function() {
             $('.image-editor').cropit('offset', { x: 0, y: 0 });
          }

  });``

And saving with:

$('#crop_button').click(function() {

  // Move cropped image data to hidden input

  var imageData = $('.image-editor').cropit('export');
  $('.hidden-image-data').val(imageData);

  // Print HTTP request params

    $.ajax({
       type: 'POST',
       data: {imagedata: imageData, refid: <?php echo $refid; ?>},
       url: 'upload.php',
       success: function(data){
           $('.image-editor').cropit('imageSrc', 'https://EXAMPLE.com/custbooks/images/<?php echo $refid; ?>.jpg');
        alert('Cropped image saved!');
      }

 });          

  // Prevent the form from actually submitting
  return false;

});`

But no luck.

If I don't set the "max zoom", I can only zoom an image to 175x175 - which means that rectangular images can't be cropped into squares.

I've tried the exportZoom setting, it doesn't seem to do anything.

Can anyone offer some advice?