cropperjs
cropperjs copied to clipboard
fengyuanchen
1px black line added when cropping
I tried last 1.5.4 version as well as 2.0.0-alpha, but the problem is always the same.
Used settings:
(...)
cropper = new Cropper(img,{
viewMode: 2,
aspectRatio: targetWidth/targetHeight, // for 300/400 = 0.75
zoomable: false,
});
Image used to test with the above settings:
Result cropped image:
This may cause by flooring float numbers to integer numbers, may need to refactor the cropper on numbers normalizing.
I dealt with this manually. This phenomenon occurs if the width of the picture is odd. If the width of an image is odd, then manually reduce the width of the image by 1 and reduce the height by the number of pixels.
What I did is set a bounding box for the cropbox to move in. That leaves some space around the edges. If it comes 1 pixel short it doesn't cause directly the black line to appear but still has a piece of the image to use.
P.S. I didn't use this crop tool but my crop tool has the same issue some time, hope my method can help some one out.
I dealt with this manually. This phenomenon occurs if the width of the picture is odd. If the width of an image is odd, then manually reduce the width of the image by 1 and reduce the height by the number of pixels.
I tried to short 1px of the width, and 1px of height, but It seemed to not solve the problem, It still remains 1px black line
Can we get some more information on the "odd number of pixels" fix. Apparently nobody is going to take action on this and I'd like to resolve it. In my case, I export the files as PNG images with transparency, then detect if any pixels are transparent before saving as either png or jpg.... and it often saves as png inadvertantly because of the extra transparent pixels
This may cause by flooring float numbers to integer numbers, may need to refactor the cropper on numbers normalizing.
Which numbers specifically, and what would a good fix be. I'm almost to the point of writing a "post crop" function to go through all the pixels on the edges to detect if this happened (all transparent pixels on the edges) and simply remove them. That's a bad solution, but it's about all I've got without an update
@collinph You can take a look at the PR #300 which is fixing the current issue (with precisePreview: true)
@collinph You can take a look at the PR #300 which is fixing the current issue (with
precisePreview: true)
Is there a built version of this PR implemented where I could implement and do QA testing? I normally use the built JS files. It appears the PR hasn't been pulled and implemented in source yet... Any idea when/if this is going to happen?
@collinph You can test with my build on npm (@daiyam/cropperjs, source) which include the PR. I will make a new PR since @lexiv0re didn't reply to my question.
@collinph You can test with my build on npm (@daiyam/cropperjs, source) which include the PR. I will make a new PR since @lexiv0re didn't reply to my question.
Do I need to enable the precisePreview option to fix the current bug?
The PR #1047 fix the issue for me.
The getCroppedCanvas method use the getData method to get the cropped area position and size data. Set getData optional param rounded true to get rounded values to fix the 1px black line issue.
For those who are looking for a "solution". I'm removing 1 pixel from height or width when i'm hitting an uneven pixel value.
// If the width or height is uneven remove 1 pixel. Otherwise a black line will appear on the right or bottom.
// https://github.com/fengyuanchen/cropperjs/issues/551
if (cropper.getCroppedCanvas().width % 2 !== 0) {
cropper.setData({
width: cropper.getCroppedCanvas().width - 1,
})
}
if (cropper.getCroppedCanvas().height % 2 !== 0) {
cropper.setData({
height: cropper.getCroppedCanvas().height - 1,
})
}
As of v1.6.0, you can use the rounded option of the getCroppedCanvas method to fix it:
const canvas = cropper.getCroppedCanvas({
rounded: true,
});
Updating cropperjs to "cropperjs": "1.6.0", and using cropper.getCroppedCanvas({ rounded: true }) doesn't fix it for me with the following image.
