Kawaii Photo Filter Application

function processImage(originalImg, pinkHueAlphaStr = "0.15", brightnessPercentStr = "115", saturationPercentStr = "130", contrastPercentStr = "105", softnessPxStr = "0.5") {
    // This function applies a "Kawaii" style filter to an image.
    // It assumes 'originalImg' is a fully loaded HTMLImageElement, HTMLCanvasElement, ImageBitmap, or similar.
    // If 'originalImg' might not be loaded (e.g., new Image() where src is still loading), 
    // the caller should handle waiting for 'onload' or this function should be modified 
    // to return a Promise and handle 'onload' internally.

    // Parse string parameters to numeric values, applying defaults if parsing fails or parameters are invalid.
    const pinkHueAlpha = Math.max(0, Math.min(1, parseFloat(pinkHueAlphaStr) || 0.15));
    const brightnessPercent = parseInt(brightnessPercentStr, 10) || 115;
    const saturationPercent = parseInt(saturationPercentStr, 10) || 130;
    const contrastPercent = parseInt(contrastPercentStr, 10) || 105;
    const softnessPx = Math.max(0, parseFloat(softnessPxStr) || 0.5);

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

    // Determine image dimensions. Use naturalWidth/Height for HTMLImageElement, 
    // or width/height for other types like HTMLCanvasElement or ImageBitmap.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Handle cases where the image might not be loaded or has no dimensions.
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Image has zero dimensions. This might be due to the image not being loaded or an invalid image source. Returning a 1x1 canvas.");
        canvas.width = 1; // Avoid 0x0 canvas, which can cause issues.
        canvas.height = 1;
        return canvas;
    }

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

    // Build the CSS filter string for brightness, saturation, contrast, and blur.
    // Filters are applied in the order they appear in the string.
    let filterParts = [];
    if (brightnessPercent !== 100) {
        filterParts.push(`brightness(${brightnessPercent}%)`);
    }
    if (saturationPercent !== 100) {
        filterParts.push(`saturate(${saturationPercent}%)`);
    }
    if (contrastPercent !== 100) {
        filterParts.push(`contrast(${contrastPercent}%)`);
    }
    if (softnessPx > 0) {
        filterParts.push(`blur(${softnessPx}px)`);
    }
    
    const filterString = filterParts.join(' ').trim();

    if (filterString) {
        ctx.filter = filterString;
    }

    // Draw the image onto the canvas. This will apply the defined filters.
    try {
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (e) {
        // Log error and return a clean canvas if drawing fails (e.g. tainted canvas).
        console.error("Error drawing image to canvas: ", e);
        ctx.filter = 'none'; // Reset any lingering filter state.
        ctx.clearRect(0, 0, canvas.width, canvas.height); // Ensure clean state.
        // The canvas (possibly empty or in an error state from the perspective of content) is still returned.
        return canvas;
    }
    
    // Reset filter before drawing the color overlay to ensure the overlay itself isn't filtered.
    ctx.filter = 'none';

    // Apply the pinkish/peachy hue overlay if alpha is greater than 0.
    if (pinkHueAlpha > 0) {
        // A common "kawaii" pink is a light, slightly warm pink. 
        // RGB(255, 190, 200) is chosen for this soft, warm pink.
        ctx.fillStyle = `rgba(255, 190, 200, ${pinkHueAlpha})`;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    return canvas;
}