Image Straightening Tool

function processImage(originalImg, angleInDegrees = 0) {
    let angle = parseFloat(angleInDegrees);

    // If angleInDegrees is not a valid number or cannot be parsed to one,
    // default the angle to 0.
    if (isNaN(angle)) {
        angle = 0;
    }

    const w = originalImg.width;
    const h = originalImg.height;

    // If the original image has no effective dimensions (e.g., width or height is zero,
    // which can happen if the image isn't loaded yet or is an empty/invalid image file),
    // return a minimal 1x1 transparent canvas.
    if (w === 0 || h === 0) {
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 1;
        emptyCanvas.height = 1;
        // The canvas is transparent by default.
        return emptyCanvas;
    }

    const radians = angle * Math.PI / 180;
    
    // Calculate the absolute values of cosine and sine of the angle.
    // These are used to compute the dimensions of the bounding box
    // that will contain the rotated image without clipping.
    const cosTheta = Math.abs(Math.cos(radians));
    const sinTheta = Math.abs(Math.sin(radians));

    // Calculate the new width and height for the canvas.
    // Math.ceil is used to ensure the canvas is large enough to hold the entire rotated image.
    // Since w and h are confirmed > 0, and cosTheta/sinTheta are not simultaneously zero,
    // newWidth and newHeight will be positive.
    const newWidth = Math.ceil(w * cosTheta + h * sinTheta);
    const newHeight = Math.ceil(w * sinTheta + h * cosTheta);

    const canvas = document.createElement('canvas');
    canvas.width = newWidth;
    canvas.height = newHeight;
    
    const ctx = canvas.getContext('2d');

    // Enable image smoothing if supported. This can improve the visual quality of
    // the rotated image, especially for rotations that are not multiples of 90 degrees.
    // Most modern browsers have imageSmoothingEnabled=true by default.
    if (typeof ctx.imageSmoothingEnabled === 'boolean') {
        ctx.imageSmoothingEnabled = true; 
    }
    // imageSmoothingQuality is a hint to the browser to use a higher quality
    // scaling algorithm if available. Support and behavior can vary.
    if (typeof ctx.imageSmoothingQuality === 'string') {
        ctx.imageSmoothingQuality = 'high'; // Common values: "low", "medium", "high"
    }
    
    // Translate the canvas context to the center of the newly sized canvas.
    // This point will be the center of rotation.
    ctx.translate(newWidth / 2, newHeight / 2);
    
    // Rotate the context by the specified angle (in radians).
    ctx.rotate(radians);
    
    // Draw the original image onto the transformed canvas.
    // The image is drawn offset by half its width and height (-w/2, -h/2)
    // so that its center aligns with the rotation point (0,0 of the transformed context).
    ctx.drawImage(originalImg, -w / 2, -h / 2, w, h);
    
    // The canvas element with the rotated image is returned.
    return canvas;
}