Circular crop is flaky

[adelespinasse]

Create a ReactCrop with crop.aspect=1 and ellipse=true. Try shrinking and growing the circle. At some point when the circle is small and you're trying to make it larger, it will suddenly invert around its upper handle and/or become very small.

[sekoyo]

Hi I'm not sure whether I'll try and fix it or deprecate it, it was added via PR from someone but feels extraneous to the core API and never sat well with me. I'll take a look and see if I can replicate this issue but I'm unlikely to add more complexity to the code to try and fix it (more likely to remove complexity from the code by removing it entirely - sorry!)

[adelespinasse]

@dominictobias Would you consider keeping it if I submitted a PR to fix it? I haven't looked at the code at all, but I might consider it.

[sekoyo]

Feel free to try, but you might find it tricky, also since this is just a visual change I would be surprised if the jumping didn't happen for rectangles. IIRC this should only happen when drawing a new shape but I'll have a try and see if I can replicate when I have some time in the next week.

[aaronshim]

Hi @adelespinasse, have you made any progress on this since? I'm running into a similar problem. Thanks!

[adelespinasse]

@aaronshim It hasn't been at the top of my priorities. I just use a square crop. :/

[sekoyo]

Sorry to say but this feature is going away in v2 I'm releasing probably this weekend, as it's a feature I don't have time/inclination to get working properly and I want to remove bloat from the codebase. v2 has a couple of breaking changes but no major difference so feel free to carry on using v1 if you want it

[JeevaS0722]

try this

const canvas = getResizedCanvas(previewCanvas, crop.width, crop.height);
 const base64Image = canvas.toDataURL('image/png');
 console.log('base64Image', base64Image);
function getResizedCanvas(canvas, newWidth, newHeight) {
 const tmpCanvas = document.createElement('canvas');
 tmpCanvas.width = newWidth;
 tmpCanvas.height = newHeight;
 const ctx = tmpCanvas.getContext('2d');
 ctx.save();
 ctx.beginPath();
 ctx.arc(newWidth / 2, newHeight / 2, newHeight / 2, 0, Math.PI * 2, false);
 ctx.closePath();
 ctx.clip();

 ctx.drawImage(
   canvas,
   0,
   0,
   canvas.width,
   canvas.height,
   0,
   0,
   newWidth,
   newHeight
 );
 ctx.restore();
 // const base64Image = canvas.toDataURL('image/jpeg');
 return tmpCanvas;
}