Image Stencil Filter Effect Tool

function processImage(originalImg, threshold = 128, foregroundColorStr = "0,0,0", backgroundColorStr = "255,255,255") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // willReadFrequently for performance with getImageData/putImageData

    const imgActualWidth = originalImg.naturalWidth || originalImg.width;
    const imgActualHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgActualWidth;
    canvas.height = imgActualHeight;

    // Ensure threshold is within a valid range (0-255)
    const clampedThreshold = Math.max(0, Math.min(255, threshold));

    // Helper to parse color strings like "R,G,B"
    const parseColor = (colorStr, defaultColor) => {
        try {
            const parts = colorStr.split(',').map(c => parseInt(c.trim(), 10));
            if (parts.length === 3 && parts.every(p => !isNaN(p) && p >= 0 && p <= 255)) {
                return parts;
            }
        } catch (e) {
            // Fallthrough to default if parsing fails
        }
        return defaultColor;
    };

    const finalFgColor = parseColor(foregroundColorStr, [0, 0, 0]); // Default to black
    const finalBgColor = parseColor(backgroundColorStr, [255, 255, 255]); // Default to white

    try {
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;

        for (let i = 0; i < data.length; i += 4) {
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];
            // Alpha (data[i+3]) is preserved

            // Convert to grayscale using the luminosity method
            const gray = 0.299 * r + 0.587 * g + 0.114 * b;

            let targetColor;
            if (gray >= clampedThreshold) {
                targetColor = finalBgColor; // Typically white or a light color
            } else {
                targetColor = finalFgColor; // Typically black or a dark color
            }

            data[i] = targetColor[0];     // Red
            data[i + 1] = targetColor[1]; // Green
            data[i + 2] = targetColor[2]; // Blue
            // data[i + 3] (alpha) remains unchanged from the original image
        }
        ctx.putImageData(imageData, 0, 0);

    } catch (e) {
        console.error("Error processing image:", e);
        // Draw an error message on the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear image if drawn
        ctx.fillStyle = 'rgba(230, 230, 230, 1)'; // Light grey background
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        
        const message = `Error: Could not process image.\n(This can happen with cross-origin images.)`;
        const lines = message.split('\n');
        
        // Dynamically adjust font size
        let fontSize = 20;
        if (canvas.width > 0 && canvas.height > 0) {
            fontSize = Math.min(canvas.width / (message.length * 0.4), canvas.height / (lines.length * 2), 20);
            fontSize = Math.max(fontSize, 10); // Minimum font size
        }
         ctx.font = `${fontSize}px Arial`;

        const lineHeight = fontSize * 1.2;
        const totalTextHeight = lines.length * lineHeight;
        let startY = (canvas.height - totalTextHeight) / 2;

        ctx.textBaseline = 'top';
        for (let j = 0; j < lines.length; j++) {
            const line = lines[j];
            const metrics = ctx.measureText(line); // To center each line if needed based on its specific width.
            const lineX = (canvas.width - metrics.width) / 2;
            ctx.fillText(line, lineX, startY + (j * lineHeight));
        }
    }

    return canvas;
}