Image Greek Column Filter Effect Tool

function processImage(originalImg, brightnessOffset = 40, contrastLevel = 1.3) {
    const canvas = document.createElement('canvas');
    // Use { willReadFrequently: true } for potential performance optimization if available/needed.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Ensure dimensions are from the intrinsic size of the image
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    // Get the image data from the canvas
    // Note: this can be slow for very large images.
    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    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

        // 1. Convert to grayscale using the luminosity method (standard NTSC weights)
        // L = 0.299*R + 0.587*G + 0.114*B
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // 2. Apply brightness adjustment
        // This adds the offset to the grayscale value.
        gray += brightnessOffset;

        // 3. Apply contrast adjustment
        // Formula: NewValue = (OldValue - 128) * ContrastFactor + 128
        // This centers the contrast adjustment around mid-gray (128).
        // A contrastLevel of 1.0 means no change.
        // Values > 1.0 increase contrast, 0.0 <= values < 1.0 decrease contrast.
        gray = (gray - 128) * contrastLevel + 128;
        
        // Clamp the value to the 0-255 range to ensure it's a valid color component
        gray = Math.max(0, Math.min(255, gray));

        // Set the new RGB values to the calculated gray value for a grayscale effect.
        // Alpha remains unchanged.
        data[i] = gray;     // Red
        data[i + 1] = gray; // Green
        data[i + 2] = gray; // Blue
    }

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

    return canvas;
}