unwanted crop image using replace method

[sanjarani]

Hi again and thanks for your greate plugin;

This is my cropper

        $cropperImage.cropper({
            aspectRatio: 'free',
            autoCropArea: false,
            strict: false,
            guides: false,
            highlight: false,
            dragCrop: false,
            cropBoxMovable: true,
            cropBoxResizable: false,

            minContainerWidth: width,
            minContainerHeight: height,
            minCropBoxWidth: width,
            minCropBoxHeight: height,
            cropBoxResizable: false,

            built: function () {
                $cropperImage.cropper("setCropBoxData", {width: width, height: height});
            }

        });

And this is for select another picture from input field:

        $('#avatarInput').on('change', function (eve) {

            var file = document.getElementById('avatarInput').files[0];

            var reader = new FileReader();
            reader.onload = function (e) {
                //$cropperImage.attr('src', e.target.result);
                $cropperImage.cropper('replace', e.target.result, true);
            };

            reader.readAsDataURL(file);

        });

The problem is the cropper will compress image without respect to aspect ratio.

please look at these pictures:

Cropper work fine on initialze and the issue will appear after replace method

[fengyuanchen]

It is the right behaviour for your case. Please read the docs about the replace method carefully.