Round Image Corners in Your Browser Round the corners of images with adjustable radius for a modern, polished look.

The tool works by utilizing the Canvas 2D context's clip() method in conjunction with a custom rounded rectangle path created using moveTo, lineTo, and quadraticCurveTo commands from the HTML5 Canvas API. This path is defined by a radius that determines the curvature of the corners, which is clamped to half the minimum dimension of the image to prevent excessive rounding. The image is then drawn onto the canvas using the drawImage() method, and pixels outside the rounded rectangle are automatically clipped due to the previously applied clip path. The resulting image data is obtained using the toDataURL() method with the 'image/png' format specifier, which preserves transparent corners by including an alpha channel in the output.

To handle user input, the tool uses React's useState hook to store the current image and result, as well as the radius value selected by the user. The useRef hook is used to create a reference to the canvas element, allowing it to be accessed and manipulated within the component's functions. When the user selects an image file using the FileDropzone component, a URL object is created for the file using the URL.createObjectURL() method, which is then passed to the img.onload event handler. This handler sets up the canvas dimensions, clears any existing content, and defines the clip path based on the current radius value.

The processImage function is called when the user clicks the "Round Corners" button, triggering the image processing pipeline. It first checks if an image has been loaded, then retrieves the 2D drawing context from the canvas reference. The img.onload event handler is responsible for drawing the image onto the canvas after it has finished loading, at which point the clip path is applied and the resulting image data is obtained using toDataURL(). This output is stored in the result state variable, allowing it to be displayed as a preview to the user.

In terms of file formats, the tool supports any image type that can be loaded by the browser, but outputs PNG files specifically due to their ability to preserve transparent corners. The download button uses the HTMLAnchorElement interface to create a new link element, which is then clicked programmatically to initiate the download process. The resulting PNG file has a transparent background where the original image's corners have been removed, allowing it to be seamlessly overlaid onto any other design elements.