Image High Contrast Noir Filter

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

    // 2. Set canvas dimensions to match the original image
    // Use naturalWidth/Height if available, otherwise fallback to width/height
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;
    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // 3. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 4. Get the image data from the canvas
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error getting imageData: ", e);
        // This can happen due to cross-origin restrictions if the image source is external
        // and the canvas becomes tainted. In such a case, we return the canvas
        // with the original image drawn on it, without applying the filter.
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // 5. Process each pixel
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i+1];
        const b = data[i+2];
        // Alpha channel (data[i+3]) is preserved

        // Convert to grayscale using the luminance method (standard for perceived brightness)
        // L = 0.299*R + 0.587*G + 0.114*B
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;

        // Normalize luminance to the range [0, 1]
        const normLuminance = luminance / 255.0;

        // Apply contrast adjustment
        // The formula `(value - midpoint) * factor + midpoint` adjusts contrast.
        // For normalized values, midpoint is 0.5.
        let contrastedLuminance = (normLuminance - 0.5) * contrastFactor + 0.5;

        // Clamp the result to the range [0, 1]
        contrastedLuminance = Math.max(0, Math.min(1, contrastedLuminance));

        // Convert back to the range [0, 255]
        const finalGray = Math.round(contrastedLuminance * 255);

        // Set the new RGB values for the pixel (making it grayscale)
        data[i]   = finalGray; // Red
        data[i+1] = finalGray; // Green
        data[i+2] = finalGray; // Blue
    }

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

    // 7. Return the canvas element
    return canvas;
}