Image Head Straightener Tool

/**
 * Rotates an image to straighten a tilted subject, like a head.
 * The rotation is performed around the center of the image.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @param {number} angle The angle in degrees to rotate the image. A positive value rotates clockwise, a negative value rotates counter-clockwise. Default is 0.
 * @returns {HTMLCanvasElement} A new canvas element containing the rotated image. The canvas is sized to fit the entire rotated image without clipping.
 */
function processImage(originalImg, angle = 0) {
    // Convert angle from degrees to radians
    const angleInRadians = angle * (Math.PI / 180);

    const originalWidth = originalImg.width;
    const originalHeight = originalImg.height;

    // Use absolute values of sin and cos to calculate the new bounding box dimensions
    const cos = Math.abs(Math.cos(angleInRadians));
    const sin = Math.abs(Math.sin(angleInRadians));

    // Calculate the size of the new canvas needed to fit the rotated image
    const newWidth = Math.floor(originalWidth * cos + originalHeight * sin);
    const newHeight = Math.floor(originalWidth * sin + originalHeight * cos);

    // Create a new canvas element
    const canvas = document.createElement('canvas');
    canvas.width = newWidth;
    canvas.height = newHeight;

    const ctx = canvas.getContext('2d');

    // It's good practice to set the fill style for any potential transparent areas
    ctx.fillStyle = 'rgba(0, 0, 0, 0)';
    ctx.fillRect(0, 0, newWidth, newHeight);

    // Translate the canvas context to the center of the new canvas
    ctx.translate(newWidth / 2, newHeight / 2);

    // Rotate the context by the specified angle
    ctx.rotate(angleInRadians);

    // Draw the original image onto the rotated context.
    // The image is drawn centered at the new origin (0,0), which is the center of the canvas.
    ctx.drawImage(originalImg, -originalWidth / 2, -originalHeight / 2);

    // The canvas now contains the rotated image.
    return canvas;
}