Image RED Cinema Camera Filter Effect Tool

function processImage(originalImg, redBoost = 1.25, greenAdjust = 0.95, blueAdjust = 0.90, contrastFactor = 1.15) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // willReadFrequently for performance with getImageData/putImageData

    // Use naturalWidth/Height for original image dimensions
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Get the ImageData object from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray

    // Loop through each pixel (R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        // Alpha channel (data[i + 3]) is usually left unchanged

        // 1. Apply color adjustments for the "RED Camera" look
        // Boost reds
        r *= redBoost;
        // Adjust greens (e.g., slight desaturation or shift)
        g *= greenAdjust;
        // Adjust blues (e.g., slight desaturation, warming effect by reducing blue)
        b *= blueAdjust;

        // 2. Apply contrast adjustment
        // Formula: new_value = (old_value - 128) * contrast_factor + 128
        // This pushes values away from the midpoint (128), increasing contrast.
        r = (r - 128) * contrastFactor + 128;
        g = (g - 128) * contrastFactor + 128;
        b = (b - 128) * contrastFactor + 128;
        
        // Clamp values to the valid range [0, 255]
        // The 'data' array is a Uint8ClampedArray, so assignment automatically clamps.
        // However, explicit clamping is safer if calculations result in very large/small numbers
        // before assignment, though standard arithmetic operations are unlikely to overflow
        // standard number types to a degree that Uint8ClampedArray can't handle on simple assignment.
        // For clarity and robustness, especially if intermediate values could be NaN or Infinity:
        data[i] = Math.max(0, Math.min(255, r));
        data[i + 1] = Math.max(0, Math.min(255, g));
        data[i + 2] = Math.max(0, Math.min(255, b));
    }

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

    // Return the canvas element
    return canvas;
}