Photo Pink Filter Application

function processImage(originalImg, pinkIntensity = 0.5) {
    // Define the pink color for tinting.
    // Using a fairly vibrant pink (similar to HotPink: R=255, G=105, B=180).
    // For a softer pink, you could use something like R=255, G=192, B=203 (Pink).
    const pinkR = 255;
    const pinkG = 105;
    const pinkB = 180;

    // Ensure pinkIntensity is within the valid range [0, 1]
    const intensity = Math.max(0, Math.min(1, parseFloat(pinkIntensity)));

    // Create a canvas element
    const canvas = document.createElement('canvas');
    const naturalWidth = originalImg.naturalWidth;
    const naturalHeight = originalImg.naturalHeight;

    // It's possible the image isn't loaded yet or has no dimensions.
    // Handle this by returning an empty (or tiny) canvas.
    if (naturalWidth === 0 || naturalHeight === 0) {
        canvas.width = 0;
        canvas.height = 0;
        console.warn("Original image has zero dimensions. Returning an empty canvas.");
        return canvas;
    }

    canvas.width = naturalWidth;
    canvas.height = naturalHeight;

    // Get the 2D rendering context
    const ctx = canvas.getContext('2d');

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

    // If intensity is 0, no filter needs to be applied. Return the canvas with the original image.
    if (intensity === 0) {
        return canvas;
    }

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

        // Iterate through each pixel (represented by 4 values: R, G, B, A)
        for (let i = 0; i < data.length; i += 4) {
            const r = data[i];     // Red channel
            const g = data[i + 1]; // Green channel
            const b = data[i + 2]; // Blue channel
            // Alpha channel (data[i + 3]) is preserved

            // Apply the pink filter using a color blending (interpolation) method:
            // NewColor = OriginalColor * (1 - intensity) + TintColor * intensity
            // This effectively overlays the pink color with the given intensity.
            data[i] = r * (1 - intensity) + pinkR * intensity;
            data[i + 1] = g * (1 - intensity) + pinkG * intensity;
            data[i + 2] = b * (1 - intensity) + pinkB * intensity;
        }

        // Put the modified image data back onto the canvas
        ctx.putImageData(imageData, 0, 0);
    } catch (e) {
        // Catch potential security errors with getImageData if the image is cross-origin and canvas is tainted
        console.error("Error processing image with pink filter: ", e);
        // In case of error, we might return the canvas with the original image drawn,
        // or handle it differently (e.g., return an empty canvas or throw).
        // For now, ctx still has the original image drawn if getImageData failed.
        // To be safe, or clear, one might clearRect and draw original again or nothing.
        // However, if drawImage succeeded, but getImageData failed (CORS),
        // the canvas is tainted and further operations might be restricted.
        // The problem assumes non-tainted canvas usage.
    }


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