Image Bubble Gum Filter Effect Tool

function processImage(originalImg, pinkMix = 0.3, blueMix = 0.15, saturation = 1.3, brightness = 1.1) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure parameters are numbers, as they could be passed as strings.
    const numPinkMix = Number(pinkMix);
    const numBlueMix = Number(blueMix);
    const numSaturation = Number(saturation);
    const numBrightness = Number(brightness);

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

    if (imgWidth === 0 || imgHeight === 0) {
        // Handle cases where the image might not be loaded or has no dimensions.
        canvas.width = 1; // Minimal size
        canvas.height = 1;
        console.error("Image Bubble Gum Filter: Original image not loaded or has zero dimensions.");
        // Return an empty (or tiny) canvas to avoid breaking UI flow dramatically.
        return canvas;
    }

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

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

    // Get the image data from the canvas. This is an array of R,G,B,A values.
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Define base colors for the "Bubble Gum" effect
    const PINK_R = 255, PINK_G = 192, PINK_B = 203; // A classic "Pink" color (e.g., #FFC0CB)
    const BLUE_R = 135, BLUE_G = 206, BLUE_B = 250; // A "Light Sky Blue" color (e.g., #87CEFA) for a cool, sweet touch

    // Iterate over each pixel in the image data
    // Each pixel consists of 4 values: 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];

        // 1. Apply Brightness adjustment
        // A brightness factor > 1 increases brightness, < 1 decreases it.
        r *= numBrightness;
        g *= numBrightness;
        b *= numBrightness;

        // 2. Apply Saturation adjustment
        // A saturation factor > 1 increases saturation, 0 is grayscale, 1 is original.
        // Calculate luminance (perceived brightness) of the pixel
        const lum = r * 0.299 + g * 0.587 + b * 0.114; // Standard NTSC weights
        // Interpolate between the grayscale version (lum) and the color
        r = lum + (r - lum) * numSaturation;
        g = lum + (g - lum) * numSaturation;
        b = lum + (b - lum) * numSaturation;
        
        // 3. Apply Pink Tint
        // Blend the current color with the defined PINK color.
        // The numPinkMix factor determines the strength of this blend.
        r = r * (1 - numPinkMix) + PINK_R * numPinkMix;
        g = g * (1 - numPinkMix) + PINK_G * numPinkMix;
        b = b * (1 - numPinkMix) + PINK_B * numPinkMix;

        // 4. Apply Blue Tint (subtly, over the already pink-tinted color)
        // Blend the current (pink-tinted) color with the defined BLUE color.
        r = r * (1 - numBlueMix) + BLUE_R * numBlueMix;
        g = g * (1 - numBlueMix) + BLUE_G * numBlueMix;
        b = b * (1 - numBlueMix) + BLUE_B * numBlueMix;

        // Clamp the R, G, B values to the valid [0, 255] range
        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));
        // The Alpha channel (data[i+3]) is typically left unchanged for this kind of filter.
    }

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

    // Return the canvas element with the filtered image
    return canvas;
}