Image Pastel Filter Application

function processImage(originalImg, saturationFactor = 0.6, lightnessAdd = 0.15) {
    // Ensure parameters are numbers, falling back to defaults if parsing fails
    const finalSaturationFactor = isNaN(parseFloat(saturationFactor)) ? 0.6 : parseFloat(saturationFactor);
    const finalLightnessAdd = isNaN(parseFloat(lightnessAdd)) ? 0.15 : parseFloat(lightnessAdd);

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

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    if (imgWidth === 0 || imgHeight === 0) {
        // Handle cases where the image might not be loaded or has no dimensions
        console.error("Image has zero dimensions. Ensure it's loaded and valid.");
        canvas.width = 1; // Minimal valid canvas
        canvas.height = 1;
        return canvas;
    }

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

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

    // Get the pixel data from the canvas
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Could not get image data: ", e);
        // This can happen due to cross-origin issues if the image is tainted
        // Return the canvas with the original image drawn (if possible), or an empty one
        return canvas;
    }
    
    const data = imageData.data;

    // Helper function: Convert RGB to HSL
    // Input: r, g, b in [0, 255]
    // Output: [h, s, l] with h, s, l in [0, 1]
    function rgbToHsl(r, g, b) {
        r /= 255; g /= 255; b /= 255;
        const max = Math.max(r, g, b), min = Math.min(r, g, b);
        let h, s, l = (max + min) / 2;

        if (max === min) {
            h = s = 0; // achromatic
        } else {
            const d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch (max) {
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }
        return [h, s, l];
    }

    // Helper function: Convert HSL to RGB
    // Input: h, s, l in [0, 1]
    // Output: [r, g, b] with r, g, b in [0, 255]
    function hslToRgb(h, s, l) {
        let r, g, b;
        if (s === 0) {
            r = g = b = l; // achromatic
        } else {
            const hue2rgb = (p, q, t) => {
                if (t < 0) t += 1;
                if (t > 1) t -= 1;
                if (t < 1 / 6) return p + (q - p) * 6 * t;
                if (t < 1 / 2) return q;
                if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
                return p;
            };
            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            const p = 2 * l - q;
            r = hue2rgb(p, q, h + 1 / 3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1 / 3);
        }
        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }

    // Iterate over each pixel
    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

        // Convert current pixel's RGB to HSL
        let [h, s, l] = rgbToHsl(r, g, b);

        // Apply pastel effect:
        // 1. Reduce saturation
        s *= finalSaturationFactor;
        // 2. Increase lightness
        l += finalLightnessAdd;

        // Clamp saturation and lightness values to the [0, 1] range
        s = Math.max(0, Math.min(1, s));
        l = Math.max(0, Math.min(1, l));

        // Convert modified HSL back to RGB
        const [newR, newG, newB] = hslToRgb(h, s, l);

        // Update pixel data
        data[i] = newR;
        data[i + 1] = newG;
        data[i + 2] = newB;
    }

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

    return canvas;
}