1px black line added when cropping

[KhaninPasha0488]

"react-image-crop": "^8.6.9",

Result cropped image:

[sekoyo]

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

[KhaninPasha0488]

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); } }} />

[sekoyo]

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)

[junzero741]

@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!

[sekoyo]

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 🤔