Image Threshold Filter Tool

function processImage(originalImg, threshold = 128) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure originalImg has loaded and has dimensions
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Set canvas dimensions to match the image
    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    // Get the image data from the canvas
    // Handle potential error if canvas is 0x0 (e.g., image not loaded properly)
    if (canvas.width === 0 || canvas.height === 0) {
        // Return an empty canvas or handle as an error, depending on desired behavior
        // For now, return the (empty) canvas
        return canvas;
    }
    
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Validate and parse the threshold parameter
    let numericThreshold = parseFloat(threshold);
    if (isNaN(numericThreshold)) {
        // If threshold is not a valid number, use the default or a sensible fallback.
        // The default parameter value (128) handles cases where threshold is undefined.
        // This handles cases where it's explicitly passed as a non-numeric string.
        numericThreshold = 128;
    }

    // Clamp the threshold value to the valid range [0, 255]
    numericThreshold = Math.max(0, Math.min(255, numericThreshold));

    // Iterate over each pixel
    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 not used for intensity calculation but preserved

        // Calculate grayscale intensity using the luminance formula
        // (Alternatively, a simpler average (r + g + b) / 3 could be used)
        const intensity = 0.299 * r + 0.587 * g + 0.114 * b;

        // Apply threshold: if intensity is above threshold, set to white (255), else black (0)
        const value = intensity > numericThreshold ? 255 : 0;

        data[i] = value;     // Set Red channel
        data[i + 1] = value; // Set Green channel
        data[i + 2] = value; // Set Blue channel
        // data[i + 3] remains unchanged (Alpha channel)
    }

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

    // Return the canvas element
    return canvas;
}