Image Contrast Adjuster

function processImage(originalImg, contrast = 1.0) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Determine image dimensions. Use naturalWidth/Height for accuracy if available.
    // An Image object (which is an HTMLImageElement) has these properties once loaded.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Set canvas dimensions to match the image
    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Get the ImageData object from the canvas. This contains the pixel data.
    // This operation can fail due to cross-origin restrictions if the image source is
    // from a different domain and the server doesn't set appropriate CORS headers.
    // We assume the environment allows this (e.g., image is same-origin or CORS-enabled).
    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data; // data is a Uint8ClampedArray

    // Iterate over each pixel. Each pixel is represented by 4 bytes: R, G, B, A.
    for (let i = 0; i < data.length; i += 4) {
        // Adjust R, G, B channels. The Alpha channel (data[i+3]) is left unchanged.
        for (let j = 0; j < 3; j++) { // Loop for R, G, B components (indices 0, 1, 2 relative to i)
            const oldValue = data[i + j];
            
            // Apply the contrast adjustment formula:
            // 1. Normalize pixel value from [0, 255] to [0, 1]: oldValue / 255.0
            // 2. Shift the range so that the midpoint (0.5) becomes 0: (oldValue / 255.0) - 0.5
            // 3. Apply the contrast factor: ((oldValue / 255.0) - 0.5) * contrast
            // 4. Shift the range back, centering at 0.5: (((oldValue / 255.0) - 0.5) * contrast) + 0.5
            // 5. Scale the value back to the [0, 255] range: ( ... ) * 255.0
            
            let newValueFloat = ((oldValue / 255.0) - 0.5) * contrast + 0.5;
            newValueFloat = newValueFloat * 255.0;

            // The `imageData.data` is a Uint8ClampedArray. When a value is assigned to an element
            // in this array, it is automatically converted to an integer and clamped to the 0-255 range.
            // For example, 255.99 becomes 255; -5 becomes 0; 127.5 rounds to 128.
            data[i + j] = newValueFloat;
        }
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // Return the canvas element with the contrast-adjusted image
    return canvas;
}