Image Ruby Shine Filter Effect Tool

function processImage(originalImg, redFactor = 1.3, otherChannelsFactor = 0.8, glowAmount = 15) {
    // Ensure parameters are numbers for arithmetic operations.
    // Number() conversion handles both string and number inputs.
    const numRedFactor = Number(redFactor);
    const numOtherChannelsFactor = Number(otherChannelsFactor);
    const numGlowAmount = Number(glowAmount);

    // Fallback to default values if parsing results in NaN (e.g., from non-numeric strings).
    // This makes the function more robust to invalid string inputs passed by the user.
    const effectiveRedFactor = isNaN(numRedFactor) ? 1.3 : numRedFactor;
    const effectiveOtherChannelsFactor = isNaN(numOtherChannelsFactor) ? 0.8 : numOtherChannelsFactor;
    const effectiveGlowAmount = isNaN(numGlowAmount) ? 15 : numGlowAmount;

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

    // Handle cases where image dimensions might be 0 (e.g., image not loaded yet or invalid/empty image).
    if (canvas.width === 0 || canvas.height === 0) {
        // console.error("Image has zero width or height. Ensure the image is loaded and valid.");
        // Return an empty (but valid sized) canvas if possible, or the 0x0 canvas.
        // The caller might need to handle this. For now, returning the 0x0 canvas.
        return canvas;
    }

    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    //Operations can fail if canvas is 0x0
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This can happen due to security restrictions (tainted canvas) or if dimensions are too small/invalid.
        // console.error("Could not get ImageData: ", e);
        // Return the canvas with the original image drawn, without filter, if ImageData fails.
        return canvas;
    }
    
    const data = imageData.data;

    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. Apply Ruby coloration: Emphasize reds, suppress other colors.
        // These intermediate values can go outside the 0-255 range temporarily.
        const r_intermediate = r * effectiveRedFactor;
        const g_intermediate = g * effectiveOtherChannelsFactor;
        const b_intermediate = b * effectiveOtherChannelsFactor;

        // 2. Apply Shine (luminance-based glow): Brighter parts of the image glow more.
        // To calculate luminance fairly, clamp the color-shifted values to a 0-255 range temporarily for this step.
        // This prevents extreme intermediate values (e.g., 500) from creating excessive, disproportionate glow.
        const r_clamped_for_lum = Math.max(0, Math.min(255, r_intermediate));
        const g_clamped_for_lum = Math.max(0, Math.min(255, g_intermediate));
        const b_clamped_for_lum = Math.max(0, Math.min(255, b_intermediate));
        
        // Calculate luminance factor (0.0 to 1.0) of the color-shifted pixel (using its clamped version).
        // Using NTSC coefficients (Rec. 601) commonly used for luminance.
        const lum_factor = (0.299 * r_clamped_for_lum + 0.587 * g_clamped_for_lum + 0.114 * b_clamped_for_lum) / 255.0;
        
        // The actual amount of glow to add is proportional to this luminance factor.
        const actualGlow = lum_factor * effectiveGlowAmount;

        // Add the calculated glow uniformly to the (potentially unclamped from step 1) intermediate R, G, B values.
        let finalR = r_intermediate + actualGlow;
        let finalG = g_intermediate + actualGlow;
        let finalB = b_intermediate + actualGlow;

        // Clamp final R, G, B values to the 0-255 range before writing back to ImageData.
        data[i] = Math.max(0, Math.min(255, finalR));
        data[i + 1] = Math.max(0, Math.min(255, finalG));
        data[i + 2] = Math.max(0, Math.min(255, finalB));
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}