Image Navigational Chart Filter Effect Tool

function processImage(originalImg, darkColorStr = "0,51,102", midColorStr = "70,130,180", lightColorStr = "240,220,170", midPoint = 0.5) {
    // Helper function to parse "R,G,B" string to [R, G, B] array of numbers
    const parseColor = (colorStr) => {
        return colorStr.split(',').map(s => parseInt(s.trim(), 10));
    };

    // Helper function for linear interpolation
    const lerp = (a, b, t) => {
        return a * (1 - t) + b * t;
    };

    const canvas = document.createElement('canvas');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Handle cases where image dimensions might not be available or are zero
    if (width === 0 || height === 0) {
        canvas.width = 0;
        canvas.height = 0;
        console.warn("Original image has zero width or height.");
        return canvas;
    }
    
    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d');
    if (!ctx) {
        // This check is mostly for robustness, as '2d' context is widely supported.
        console.error("Could not get 2D context from canvas.");
        // Return canvas as is (it will be empty)
        return canvas;
    }

    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This can happen due to cross-origin issues if the image isn't served with appropriate CORS headers.
        console.error("Could not get image data. This might be a CORS issue if the image is from another domain.", e);
        // Return the canvas with the original image drawn, but unfiltered.
        return canvas;
    }
    
    const data = imageData.data;

    const darkRGB = parseColor(darkColorStr);
    const midRGB = parseColor(midColorStr);
    const lightRGB = parseColor(lightColorStr);

    // Validate parsed colors (basic check for 3 components, though more sophisticated validation could be added)
    if (darkRGB.length !== 3 || midRGB.length !== 3 || lightRGB.length !== 3 ||
        darkRGB.some(isNaN) || midRGB.some(isNaN) || lightRGB.some(isNaN)) {
        console.error("Invalid color string format. Expected 'R,G,B'. Using defaults or returning original.");
        // Fallback: could return canvas as is, or throw error. For now, log and proceed with potentially faulty colors.
        // Or, to be safer, return the canvas with the original image drawn:
        // ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height); // already drawn
        return canvas;
    }


    // Clamp midPoint to be strictly between 0 and 1 to avoid division by zero or degenerate ranges.
    // A value very close to 0 or 1 means one of the color transitions will be very abrupt over a tiny luminance range.
    const midPointNormalized = Math.max(0.001, Math.min(0.999, midPoint));

    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.

        // Calculate luminance using standard NTSC/PAL coefficients.
        // Luminance value will be between 0 and 255.
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b; 
        const lumNorm = luminance / 255; // Normalize luminance to a 0-1 scale.

        let newR, newG, newB;

        if (lumNorm < midPointNormalized) {
            // Interpolate between darkColor and midColor for the lower part of luminance spectrum.
            // The factor 't' is remapped from [0, midPointNormalized) to [0, 1).
            const t = lumNorm / midPointNormalized; 
            newR = lerp(darkRGB[0], midRGB[0], t);
            newG = lerp(darkRGB[1], midRGB[1], t);
            newB = lerp(darkRGB[2], midRGB[2], t);
        } else {
            // Interpolate between midColor and lightColor for the upper part of luminance spectrum.
            // The factor 't' is remapped from [midPointNormalized, 1] to [0, 1].
            const t = (lumNorm - midPointNormalized) / (1 - midPointNormalized);
            newR = lerp(midRGB[0], lightRGB[0], t);
            newG = lerp(midRGB[1], lightRGB[1], t);
            newB = lerp(midRGB[2], lightRGB[2], t);
        }

        // Assign the new RGB values, rounded to the nearest integer. Alpha remains unchanged.
        data[i] = Math.round(newR);
        data[i + 1] = Math.round(newG);
        data[i + 2] = Math.round(newB);
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}