fengyuanchen / cropperjs

JavaScript image cropper.
https://fengyuanchen.github.io/cropperjs/
MIT License
13.03k stars 2.41k forks source link

Different cut from preview to actual cut #1178

Closed maurodf0 closed 1 month ago

maurodf0 commented 3 months ago

Hi everyone, I'm using Cropper 1.5 into my Web Application.

I noticed that there's some height difference into the preview vs the actual cut into the image, there's some issue or some checks i can do in cropper.js to avoid this?

Thanks

Attached u can find the screen "schermata" is the screen for the preview of the cut, the other one is the actual cut. As u can see some part of the sky is missing.

How can i avoid this? 1-Mutart-1340 Schermata 2024-06-10 alle 15 17 54

Thanks

Code


    function initializeCropper(imageSource) {
        console.log(imageSource);
        toggleLoader('show');
        if (cropper) {
            cropper.destroy();
        }
        imageElement.src = imageSource;
        imageElement.onload = function() {
            cropper = new Cropper(imageElement, {
                aspectRatio: 1, // Imposta un default
                scalable: true,
                zoomable: true,
                zoomOnWheel: true,
                wheelZoomRatio: 0.1,
                viewMode: 1,
                dragMode: 'move',
                cropBoxMovable: false,
                movable: true,
                cropBoxResizable: false,
                autoCropArea: .9,
                minCropBoxWidth: 400,
                minCropBoxHeight: 400
            });

                //se il file esiste tolgo la possibilità di fare ulteriore upload al click
                document.querySelector('.big-input').setAttribute('for', 'null');

                //ricomincia da 0 e cancella tutto dalla UI
                deleteAll();
                stepContainer.style.display = 'flex';
        };
    }

Codebin link for full code: https://www.codebin.cc/code/clx90c67r0001ie08whl2p07j:47QGmDkEfqTdKJr6DUrAoXMYWZ3kTgqhu8tLxGWfvk3P Codebin Psw: mycitycodePSW

maurodf0 commented 3 months ago

The fact that the preview is bigger in height than the actual image can be a problem?

Schermata 2024-06-10 alle 17 36 17

If u can see the cropper box goes over the image (there's a transparent part on the top of the cropper box)

fengyuanchen commented 3 months ago

I have no idea about this. Try v2?