Photo Oxidized Bronze Filter Effect Tool

function processImage(originalImg, bronzeIntensity = 0.8, patinaStrength = 0.5) {
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can be a performance hint for some browsers
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Ensure originalImg dimensions are correctly obtained
    // For an HTMLImageElement, naturalWidth/naturalHeight are the intrinsic dimensions.
    // For other canvas elements or ImageBitmap, width/height are appropriate.
    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 pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Ensure parameters are numbers and clamp them to valid [0, 1] ranges
    let numBronzeIntensity = Number(bronzeIntensity);
    let numPatinaStrength = Number(patinaStrength);

    numBronzeIntensity = Math.max(0, Math.min(1, numBronzeIntensity));
    numPatinaStrength = Math.max(0, Math.min(1, numPatinaStrength));

    // Define target color for patina (a desaturated teal/green)
    const patinaTargetR = 60; 
    const patinaTargetG = 160;
    const patinaTargetB = 130;

    // Iterate over each pixel (RGBA components)
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // Step 1: Apply bronze tint coefficients.
        // These coefficients are chosen to create a warm, somewhat reddish-brown tone
        // by emphasizing red, reducing green slightly, and significantly reducing blue.
        // R_bronze = R_orig * C_r1 + G_orig * C_g1 + B_orig * C_b1
        // G_bronze = R_orig * C_r2 + G_orig * C_g2 + B_orig * C_b2
        // B_bronze = R_orig * C_r3 + G_orig * C_g3 + B_orig * C_b3
        const r_bronze = (r * 0.50) + (g * 0.40) + (b * 0.20);
        const g_bronze = (r * 0.25) + (g * 0.35) + (b * 0.10);
        const b_bronze = (r * 0.15) + (g * 0.20) + (b * 0.05);

        // Step 2: Apply patina (oxidation) effect.
        // This blends the calculated bronze color with the target patina color.
        // The `numPatinaStrength` parameter controls the intensity of this blend.
        const r_patina_effect = r_bronze * (1 - numPatinaStrength) + patinaTargetR * numPatinaStrength;
        const g_patina_effect = g_bronze * (1 - numPatinaStrength) + patinaTargetG * numPatinaStrength;
        const b_patina_effect = b_bronze * (1 - numPatinaStrength) + patinaTargetB * numPatinaStrength;
        
        // Step 3: Interpolate between the original pixel color and the full effect color.
        // The `numBronzeIntensity` parameter controls the overall strength of the filter.
        // If numBronzeIntensity is 0, the original color is preserved.
        // If numBronzeIntensity is 1, the full bronzed and oxidized effect is applied.
        let finalR = r * (1 - numBronzeIntensity) + r_patina_effect * numBronzeIntensity;
        let finalG = g * (1 - numBronzeIntensity) + g_patina_effect * numBronzeIntensity;
        let finalB = b * (1 - numBronzeIntensity) + b_patina_effect * numBronzeIntensity;

        // Step 4: Clamp the final color component values to the valid [0, 255] range.
        data[i] = Math.max(0, Math.min(255, Math.round(finalR)));
        data[i + 1] = Math.max(0, Math.min(255, Math.round(finalG)));
        data[i + 2] = Math.max(0, Math.min(255, Math.round(finalB)));
        // The alpha channel (data[i + 3]) remains unchanged.
    }

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

    // Return the canvas element with the applied effect
    return canvas;
}