Image Viewer

/**
 * Creates a canvas element displaying the provided image, with optional zoom and rotation.
 * The canvas is sized to perfectly fit the transformed image without clipping.
 *
 * @param {Image} originalImg The javascript Image object to be displayed.
 * @param {number | string} zoom A multiplier for scaling the image. E.g., 2 for 200% zoom, 0.5 for 50%. Defaults to 1.
 * @param {number | string} rotation The angle in degrees to rotate the image clockwise. Defaults to 0.
 * @returns {HTMLCanvasElement} A canvas element with the transformed image drawn on it.
 */
function processImage(originalImg, zoom = 1, rotation = 0) {
    // 1. Sanitize and parse parameters to ensure they are valid numbers.
    const zoomFactor = Math.max(0.01, parseFloat(zoom) || 1); // Prevent zero or negative zoom
    const angle = parseFloat(rotation) || 0;

    // 2. Use the intrinsic dimensions of the image for accurate calculations.
    const originalWidth = originalImg.naturalWidth || originalImg.width;
    const originalHeight = originalImg.naturalHeight || originalImg.height;

    // 3. Create the canvas and get its 2D rendering context.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 4. Calculate the dimensions of the final canvas.
    // To do this, we need the size of the bounding box that contains the rotated image.
    const rad = angle * Math.PI / 180;
    const sin = Math.abs(Math.sin(rad));
    const cos = Math.abs(Math.cos(rad));

    // The width and height of the bounding box around the rotated image.
    const rotatedWidth = originalWidth * cos + originalHeight * sin;
    const rotatedHeight = originalWidth * sin + originalHeight * cos;

    // The final canvas size is the rotated bounding box size, scaled by the zoom factor.
    canvas.width = rotatedWidth * zoomFactor;
    canvas.height = rotatedHeight * zoomFactor;

    // 5. Apply transformations and draw the image.
    // The transformations are applied in reverse order of the calls (rotate, then translate).

    // First, translate the canvas origin to its center. This point will act as the pivot for rotation.
    ctx.translate(canvas.width / 2, canvas.height / 2);

    // Second, rotate the canvas around the new origin.
    ctx.rotate(rad);

    // Finally, draw the image.
    // It must be drawn centered on the pivot point and scaled by the zoom factor.
    // To center it, we draw it at (-width/2, -height/2).
    const scaledWidth = originalWidth * zoomFactor;
    const scaledHeight = originalHeight * zoomFactor;

    ctx.drawImage(
        originalImg,
        -scaledWidth / 2,
        -scaledHeight / 2,
        scaledWidth,
        scaledHeight
    );

    // 6. Return the resulting canvas element.
    return canvas;
}