Scaling and movement issues on mobile causing negative crop values.

[vladartym]

When I scale my crop and move it to the top and keep repeating that action - my crop becomes larger, even though the image is already cut off at the top. Causing me to save negative values and a black line to appear when the crop is complete.

Here is a video of what's happening: https://user-images.githubusercontent.com/11331341/109075914-c7f19580-76c7-11eb-8510-166f814b1add.mov

Here is my code:

$('#myFile').change(function () {
        console.log('changed')
        const img_data = input.files[0]
        const url = URL.createObjectURL(img_data)
        imageBox.innerHTML = `<img src="${url}" id="image" width="100%">`

        $('#image').rcrop({
            full : true,
            minSize : [100,125],
            preserveAspectRatio : true,
            grid : true
        });
}

[vladartym]

It looks like it's only doing it with that specific minSize, with a 100,100 ratio I'm having no problems.

[vladartym]

My current solution:

$('#image').on('rcrop-changed', function(){
            let currentCropVal = $(this).rcrop('getValues');
            if (currentCropVal.width > initImageCropVal.width || currentCropVal.height > initImageCropVal.height ){
                $('#image').rcrop('resize', initImageCropVal.width, initImageCropVal.height, currentCropVal.x, currentCropVal.y)
            }