Image To Black And White Converter

function processImage(originalImg, thresholdParam = 128) {
    let threshold = Number(thresholdParam);

    // Validate the threshold parameter
    // It must be a number between 0 and 255.
    // If thresholdParam is a string, Number(thresholdParam) will convert it.
    // If it's NaN (e.g., Number("abc")) or out of range, use the default 128.
    if (isNaN(threshold) || threshold < 0 || threshold > 255) {
        console.warn(`Invalid threshold value: '${thresholdParam}'. Using default 128.`);
        threshold = 128;
    }

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

    // Determine image dimensions. Use naturalWidth/Height for intrinsic dimensions if available (e.g. <img> elements),
    // otherwise fallback to width/height (e.g. for Image objects created via `new Image()`).
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Handle cases where the image might not be loaded yet or has no dimensions
    if (imgWidth === 0 || imgHeight === 0) {
        console.error("Image has zero dimensions. Ensure it is loaded properly before processing.");
        // Return a small, empty canvas or one with an error message
        canvas.width = 100; // Minimal size to display potential error text
        canvas.height = 30;
        ctx.font = "12px Arial";
        ctx.fillStyle = "red";
        ctx.textAlign = "center";
        ctx.fillText("Error: Image not loaded.", canvas.width / 2, canvas.height / 2 + 4);
        return canvas;
    }

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

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

    let imageData;
    try {
        // Get the pixel data from the canvas
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        // This can happen if the image is cross-origin and the canvas becomes tainted
        console.error("Could not get ImageData from canvas. Image might be cross-origin and canvas is tainted.", e);
        // Clear canvas and draw an error message
        ctx.clearRect(0,0,canvas.width, canvas.height); // Clear the drawn image
        ctx.font = "16px Arial";
        ctx.fillStyle = "red";
        ctx.textAlign = "center";
        // Break message into multiple lines if canvas is too small horizontally
        const message = "Error: Cannot process cross-origin image.";
        if (canvas.width < ctx.measureText(message).width) {
             ctx.fillText("Error: Cross-origin", canvas.width / 2, canvas.height / 2 - 10);
             ctx.fillText("image issue.", canvas.width / 2, canvas.height / 2 + 10);
        } else {
            ctx.fillText(message, canvas.width / 2, canvas.height / 2);
        }
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray: [R,G,B,A, R,G,B,A, ...]

    // Iterate over each pixel (4 bytes at a time: R, G, B, A)
    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 pixel to grayscale using the luminosity method (standard for perceived brightness)
        // Formula: 0.299*R + 0.587*G + 0.114*B
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;

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

        data[i] = value;     // Red channel
        data[i + 1] = value; // Green channel
        data[i + 2] = value; // Blue channel
        // data[i + 3] (alpha) is left unchanged
    }

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

    return canvas;
}