1px black line added when cropping about react-image-crop HOT 5 CLOSED

I'm not sure what code you've used to create the cropped image but it's not part of the library and also you didn't provide any code. Closing since no code was provided but it's also not part of the library so the fix has to be on your side

from react-image-crop.

import React, { useEffect, useState } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
import { Button } from '@material-ui/core';
import { useFormatMessage } from '../../../hooks';
import { ButtonWithLoader } from '../../ui/Buttons';

interface IProps {
src: string;
onSubmit: (completedCrop: any) => void;
aspect?: number;
}

const generateBlob = async (cropProp: any, image: any, setBlob: any) => {
setBlob(null);
const blob = await new Promise(resolve => {
const canvas = document.createElement('canvas');
const scaleX = image.naturalWidth / image.width;
const scaleY = image.naturalHeight / image.height;
canvas.width = Math.ceil(cropProp.width * scaleX);
canvas.height = Math.ceil(cropProp.height * scaleY);
const ctx = canvas.getContext('2d');
if (!ctx) return;
const newImage = new Image();
newImage.crossOrigin = 'anonymous';
newImage.onload = () => {
ctx.drawImage(
newImage,
cropProp.x * scaleX,
cropProp.y * scaleY,
cropProp.width * scaleX,
cropProp.height * scaleY,
0,
0,
cropProp.width * scaleX,
cropProp.height * scaleY
);
canvas.toBlob(
blob => {
resolve(blob);
},
'image/jpeg',
1
);
};
newImage.src = image.src;
});
setBlob(blob);
};

export const CroppedImage: React.FC = ({ src, onSubmit, aspect = 16 / 9 }) => {
const [img, setImg] = useState(null);
const [crop, setCrop] = useState({ aspect });
const [blob, setBlob] = useState<string | null>(null);
// eslint-disable-next-line no-nested-ternary
const minSize = img ? (img.width > img.height ? img.height : img.width) : undefined;

const fm = useFormatMessage();

useEffect(() => {
if (img) {
setCrop({
aspect,
width: img.width,
minWidth: minSize / 3,
minHeight: minSize / 3,
});
}
}, [src, img]);

return (
<div style={{ display: 'flex', flexDirection: 'column', minWidth: 300 }}>
<div style={{marginBottom: '10px'}}>
<ReactCrop
src={src}
onImageLoaded={img => setImg(img)}
crop={crop}
minWidth={minSize / 3}
minHeight={minSize / 3}
onChange={(c: any) => setCrop(c)}
onComplete={(crop: any) => {
if (blob) window.URL.revokeObjectURL(blob); // clear previous blob
if (img) {
generateBlob(crop, img, setBlob);
}
}}
/>

<ButtonWithLoader
style={{backgroundColor: '#216214'}}
onPress={() => onSubmit(blob)}
variant='contained'
marginRight={false}
>
{fm('COMMON.BUTTON.APPLY')}


);
};

from react-image-crop.

I'm guessing it's due to rounding up by a pixel:

canvas.width = Math.ceil(cropProp.width * scaleX);
canvas.height = Math.ceil(cropProp.height * scaleY);

If you look at the example of the project it uses floor:

canvas.width = Math.floor(crop.width * scaleX * pixelRatio)
canvas.height = Math.floor(crop.height * scaleY * pixelRatio)

from react-image-crop.

@dominictobias
I'm guessing Math.floor is might cause the problem. because,

for example,
ratio : 2 / 1
original image size : 225 x 225

without any cropping gesture, and initial width is 100%,
cropped area should be 225 x 122.5,

but it is floored to 225 x 112
result ratio is not actually 2/1, but 2.0089285714285716 / 1.

it was an just idea, but I found out it is actually happening.

example image :

screenshot :

i will think about how to solve this problem further!

from react-image-crop.

Hm yes might need to be smarter when using % and make an algo which rounds the number in such a way that the ratio is perfect 🤔

from react-image-crop.