Bug with cropping rotated image

[AliekseiDev]

Expected Behavior

Cropped image should be the same as in a viewport while editing

Actual Behavior

After rotation and moving viewport to the right bottom corner it crops too much and image gets filled with black pixels

Steps to Reproduce the Problem

1. Open up example link
2. Click rotate button (one time)
3. Move viewport (the visible part of the image) to the right bottom corner
4. Click Croppie button

*image height should be greater than width

Example Link

Codepen

Version 2.6.4

[nsardodancor]

Same issue

[noahcooper]

This bug appears to have been introduced in version 2.6.3. Downgrading to 2.6.2 fixes this issue.

[GumpDK]

We are experiencing the same problem in version 2.6.4, only the picture gets filled with white pixels. Downgrading to 2.6.2 fixed it.

[kenny08gt]

I have the same problem version 2.6.4, picture filled with black pixels.
The downgrade to 2.6.2 fixed it.

[mjunaid720]

works on 2.4.1

[Coeur2Boeuf]

Hi,
Same issue, I suggest this fix https://github.com/Foliotek/Croppie/pull/711/commits

[noahcooper]

It looks like this was fixed in version 2.6.5.

[dduupp]

I can still reproduce this issue in Chrome on Windows 10, using the latest version (2.6.5). Here's the relevant code:

var $croppie = $('.js-croppie');
var $placeholder = $('.js-croppie-placeholder');
var $preview = $('.js-croppie-preview');

$preview.croppie({
    viewport: { width: 240, height: 320 },
    showZoomer: true,
    enableOrientation: true,
    enableExif: true // Fix iOS rotation issues
});

function readFile(input) {

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

        var reader = new FileReader();

        reader.onload = function (event) {
            $preview.croppie('bind', {
                url: event.target.result
            });

            $croppie.addClass('has-image');
            $placeholder.hide();
        };

        reader.readAsDataURL(input.files[0]);
    } else {
        alert('Sorry, your browser doesn\'t support the FileReader API.');
    }
}

//  Submit button click
$('.js-croppie-submit').on('click', function (e) {

    e.preventDefault();

    var $form = $(this.form);

    $preview.croppie('result', {
        type: 'base64',
        size: 'viewport',
        format: 'jpeg',
        quality: 0.9
    }).then(function (resp) {
        $form.find('.js-croppie-hidden-field')
            .val(resp)
            .attr('value', resp);

        $form.trigger('submit');

    }).catch(function (err) {
        console.log(err);
    });

    return false;
});

$('.js-croppie-rotate').on('click', function (ev) {
    var rotateVal = parseInt($(this).data('deg'), 10);
    $preview.croppie('rotate', rotateVal);
});

$('.js-croppie-field').on('change', function () {

    var hasValue = $(this).val();

    $('.js-croppie-submit').prop('disabled', !hasValue);

    if (hasValue) {
        readFile(this);
    } else {
        $croppie.removeClass('has-image');
        $placeholder.show();
    }
}).trigger('change');

$('.js-croppie-upload').on('click', function () {
    $('.js-croppie-field').trigger('click');
});

$('.js-croppie-delete').on('click', function () {
    $('.js-croppie-field').val('').trigger('change');
});

As you can see, I'm using Croppie to generate a base64 string which gets sent to the server using a hidden input field. It seems to be a browser related issue - it has been reported in Chrome on Windows 10 and also by some mobile users. The black rectangle makes me think that the base64 string might be cut off somewhere, could that be possible?

[CodeWithOz]

@dduupp did you find a fix or workaround for this problem?