1px difference between several cropped images' height

[igniscom]

Hello,

I'm using the directive with the following options :

<ui-cropper image="file" result-image="fileProcessed" area-type="rectangle" canvas-scalemode="full-width" aspect-ratio="1.25" result-image-format="image/jpeg" result-image-size="400"></ui-cropper>

The resulting image should be 400x320px. However, sometimes it's resulting 400x319px.

Is there a reason for that, and a way to fix it ?

[CrackerakiUA]

are you sure that the one missing pixel is not hidden by overflow?

[igniscom]

I'm talking about the files' dimensions - after creating a file from the base64 - not how they are rendered in the brower (sorry, I didn't give you enough details).

[CrackerakiUA]

i never had this issue, can you present codepen? WIth your setup on my project, tested 5-6 different files and all was correct

[igniscom]

Here is the codepen : https://codepen.io/vincent_ignis/pen/pdLoLN/ Play with the selection and see the thumb dimensions. If the selection reaches the top left and top right corners, I get 319px height, not 320px (not everytime).

(Note: the picture in the codepen is 600x600, if you need to know)

Edit: maybe something about rounding numbers? (Math.round)

[igniscom]

Test I've made:

• the issue happens sometimes when enlarging the selection to left and right area (do it, if it doesn't happens, move the selection up or down).
• then, if you scale down the selection, keeping one of its side on the area side, the issue is still there.
• resize or just move the selection (on an area side or not): no more issue.

(don't know if it can help)

[JakeAi]

@igniscom @CrackerakiUA i had just posted a similar issue here #59 i just got on here to ask if @CrackerakiUA had figured it out and then I saw this one :D

[igniscom]

Yep, but no fix found right now. :/

[JakeAi]

I tried looking into it and debug it myself but it was way too time consuming.

[samnads]

I have same problem with rectangular cropping, i am trying to get 800x420 dimension. But my result is still in 800x419. What's the problem, how can i fix it ?

[JakeAi]

@CrackerakiUA @igniscom any movement here?

[CrackerakiUA]

I don't have in plans to check this issue in near future. This is not touching any of my projects and I don't have allot free time at the moment.

[i-nottage]

I added an option to the directive that allows the user to force the aspect ratio on rectangles; it seems to solve the problem of the 1px distortion on certain files.

(3076)

            aspectRatio: '=?',
            forceAspectRatio: '=',      // <---------------
            allowCropResizeOnCorners: '=?',`

(3287)

            `scope.$watch('areaType', function () {
                cropHost.setAreaType(scope.areaType, scope.forceAspectRatio);     // <-------------
                updateResultImage(scope);
            });`

(2899)

        // returns a string of the selection area's type
        this.getAreaType = function () {
            return theArea.getType();
        };

        this.setAreaType = function (type, force) {   //  <------------
            var center = theArea.getCenterPoint();
            var curSize = theArea.getSize(),
                curMinSize = theArea.getMinSize(),
                curX = center.x,
                curY = center.y;

(2920)

            if (type === 'square' || type === 'circle' || force === true) {    //   <----------
                forceAspectRatio = true;
                theArea.setForceAspectRatio(true);
            } else {
                forceAspectRatio = false;
                theArea.setForceAspectRatio(false);
            }