crop image base64 in javascript in a circle in javascript

index.tsx
// Function to crop an image in a circle shape
function cropImageInCircle(base64Image) {
    // Create a new image element
    var img = new Image();
    img.onload = function() {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');

        // Set canvas size equal to the image size
        canvas.width = img.width;
        canvas.height = img.height;

        // Draw the image on the canvas
        context.drawImage(img, 0, 0);

        // Create a circle clipping path
        context.beginPath();
        context.arc(img.width / 2, img.height / 2, Math.min(img.width, img.height) / 2, 0, Math.PI * 2, true);
        context.closePath();
        context.clip();

        // Clear the inside of the circle to make it transparent
        context.clearRect(0, 0, canvas.width, canvas.height);

        // Draw the image again inside the circle clipping path
        context.drawImage(img, 0, 0);

        // Convert the canvas content to base64 format
        var croppedBase64Image = canvas.toDataURL();

        // Return the cropped image in base64 format
        return croppedBase64Image;
    };

    // Set the source of the image as the base64 data
    img.src = base64Image;
}
1238 chars
38 lines