white lines through image when cropping images on mobile about croppie HOT 7 CLOSED

Thanks for taking the time to submit this. We'll try to get to it, but it seems like a tough one to track down if it only happens sometimes.. Does this happen with every sized image? Large ones? Small ones? I'm guessing you're getting the canvas result, and not the html one?

Would you expect the part of the image outside of the line to be part of the result or not part of the result, i.e. is the part that's underneath that line inside your viewport when cropping?

from croppie.

Thanks to you. yes using canvas.
i tested with a lot of images and it seems to happen with photos taken from my camera (13mega pixels).

the part outside the lines are also part of the result. its exactly how i selected it.

it seems now it created a portal to another dimension:

from croppie.

tested with large pictures from the internet. doesn't happen.
tested with small pictures from the internet. doesn't happen.
seems to only happen with pictures taken with my phone camera.

from croppie.

I observed this issue also, the lines can be horizontal and/or vertical.
I believe it has something to do with decimals in pixels.

It is most easily reproduced with large images and cropping smaller parts of the image with canvas result.
This only happens on Chrome for me and I've tested it on IE11, Edge, Firefox, Chrome, Safari.
I fixed it by changing the fix function to parse float to value without decimals (an integer).

This function is used throughout the project but by changing the transform values on img css (when cropping produces lines in image) by removing decimal places had an immediate effect on the cropped image (no lines).

The only place the fix function is used and needs decimals places is on zoom values I believe.

function getCanvasImage(img, data) {
    ...

    left = fix(left);
    top = fix(top);
    width = fix(width);
    height = fix(height);
    outWidth = fix(outWidth);
    outHeight = fix(outHeight);

    ctx.drawImage(img, left, top, width, height, 0, 0, outWidth, outHeight);

    return canvas.toDataURL();
}

function fix(v, fractionalDigits) {
    return parseFloat(v).toFixed(fractionalDigits|| 0);
}

from croppie.

@Ulkuurz Thank you for your post. after some testing I think it solved the issue.

• edited the fix() function according to your post.
• edited the function calls where it is used to get a zoomer value (in 3 places) from fix(v) to fix(v, 2) .

@thedustinsmith what's your take on this? will it be included in the official version?

from croppie.

Looks good to me - I'll try to get a few changes in and release 1.0.4 today.

from croppie.

Thanks for the help. This is in 1.0.5 - the extra version just has the minified script.

from croppie.