Croppie: Wrong section cropped?

Hi,

I’ve got a bit of a weird issue here!

Below is my JS:

var $uploadCrop;
$(document).ready( function() {

            $uploadCrop = $('#uploader-avatar').croppie({
                // enableExif: true,
                viewport: {
                    width: 200,
                    height: 200,
                    type: 'square'
                },
                boundary: {
                    width: 300,
                    height: 300
                }
            });
            $uploadCrop.bind();


    $('#upload').on('click', function () {
        $('#view-avatar').hide();
        if (typeof $uploadCrop != "object") {

        }
    });

    $('#upload').on('change', function () { readFile(this); });

    $('.upload-result-avatar').on('click', function (ev) {
        $uploadCrop.croppie(
        'result', {
            type: 'canvas',
            size: 'viewport',
            format: 'jpeg'
        }).then(function (resp) {
            console.log(resp);
            $('#view-avatar').show();
            $('#currentAvatar').show().attr('src',resp);

        });
    });

});

function readFile(input) {

        if (input.files && input.files[0]) {

        var reader = new FileReader();

        reader.onload = function (e) {
            $uploadCrop.croppie('bind', {
                url: e.target.result
            });
            console.log("show it")
            $('.upload-result-avatar').show();
        }
        reader.readAsDataURL(input.files[0]);
    }
    else {
        alert("Sorry - you're browser doesn't support the FileReader API");
    }
}

…and the HTML:

      <div id="upload-avatar" style="background:green">Upload Avatar:</div>
      <div id="avatar-upload-wrapper">
        <div id="view-avatar">
          <img id="currentAvatar" src="<%if user.avatar_image%><%avatar_image%><%else%>/images/no-profile-image.png<%endif%>" />
        </div>
        <div class="actions" id="uploader-avatar">
            <a class="btn file-btn">
                <span>Upload</span>
                <input type="file" id="upload" value="Choose a file" accept="image/*" />
            </a>
            <button class="upload-result-avatar">Save Avatar</button>
        </div>
      </div>

However, when I run that - I get a weird crop (totally wrong size, and even the wrong place. Here are a couple of screenshots:

…and another example:

The silly thing, is that it works fine with the exact same image:

…you can give it a whirl here:

http://andyapp.com.nmsrv.com/test/test.html

Any ideas? I’m drawing a blank 😕

Cheers

Andy