Image Linocut Filter Effect

function processImage(originalImg, threshold = 128, invertEffect = "false") {
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    // If the original image has no dimensions, return an empty canvas.
    if (canvas.width === 0 || canvas.height === 0) {
        return canvas;
    }

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

    // Draw the original image onto the canvas.
    // This also ensures that if getImageData fails (e.g. tainted canvas),
    // the canvas returned at least contains the original image.
    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 a tainted canvas (e.g., cross-origin image loaded without
        // appropriate CORS headers) or if the image dimensions are excessively large.
        // In such cases, pixel manipulation is not permitted or fails.
        // We return the canvas with the original image drawn on it, as the filter cannot be applied.
        // console.error("Image Linocut Filter: Failed to get ImageData. Canvas might be tainted or image too large.", e);
        return canvas;
    }
    
    const data = imageData.data;

    // Validate and prepare the threshold parameter
    // Convert to number, use default if parsing fails, then clamp to 0-255 range.
    let effectiveThreshold = parseFloat(threshold);
    if (isNaN(effectiveThreshold)) {
        effectiveThreshold = 128; // Default threshold if input is not a valid number
    }
    effectiveThreshold = Math.max(0, Math.min(255, effectiveThreshold));

    // Validate and prepare the invertEffect parameter
    // Handles string "true", "1" or boolean true or number 1 as true. Case-insensitive for "true".
    // Any other value (including the default "false", or 0) will result in `invert` being false.
    const invert = String(invertEffect).toLowerCase() === "true" || String(invertEffect) === "1";

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // The original alpha value (data[i+3]) is ignored; output is fully opaque.

        // Convert pixel to grayscale using the luminosity method (approximates human perception of brightness)
        const grayscale = 0.299 * r + 0.587 * g + 0.114 * b;

        // Apply threshold: pixels with grayscale value above the threshold become white,
        // those at or below become black. This creates the high-contrast two-tone effect.
        let outputValue;
        if (grayscale > effectiveThreshold) {
            outputValue = 255; // Represents paper color (typically white)
        } else {
            outputValue = 0;   // Represents ink color (typically black)
        }

        // Apply inversion if specified (swaps black and white)
        if (invert) {
            outputValue = 255 - outputValue;
        }

        // Set the new RGB values for the pixel
        data[i] = outputValue;     // Red channel
        data[i + 1] = outputValue; // Green channel
        data[i + 2] = outputValue; // Blue channel
        data[i + 3] = 255;         // Alpha channel - make pixel fully opaque
    }

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

    return canvas;
}