Photo Black-and-White Linocut Style Transformer

/**
 * Transforms a photo into a high-contrast, pure black-and-white
 * linocut-style image suitable for carving transfer.
 *
 * @param {Image} originalImg The original Image object.
 * @param {number} threshold A value from 0 to 255 that determines the cutoff point for black and white. Higher values result in a darker image. Defaults to 128.
 * @param {string} invert A string ('true' or 'false') to invert the black and white colors. 'true' makes bright areas black and dark areas white. Defaults to 'false'.
 * @returns {HTMLCanvasElement} A canvas element with the linocut-style image.
 */
function processImage(originalImg, threshold = 128, invert = 'false') {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Draw the image onto the canvas to access its pixel data
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Get the image data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Parse parameters to ensure correct types
    const numericThreshold = Number(threshold);
    const useInvert = invert.toString().toLowerCase() === 'true';

    // Iterate over each pixel (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];

        // Convert the pixel to grayscale using the luminosity method
        // Formula: 0.299*R + 0.587*G + 0.114*B
        const grayscale = 0.299 * r + 0.587 * g + 0.114 * b;

        // Determine the new color (pure black or pure white) based on the threshold
        let newColor;
        if (grayscale > numericThreshold) {
            // This pixel is considered "light"
            newColor = useInvert ? 0 : 255; // If inverted, light becomes black (0), else white (255)
        } else {
            // This pixel is considered "dark"
            newColor = useInvert ? 255 : 0; // If inverted, dark becomes white (255), else black (0)
        }

        // Apply the new color to the R, G, and B channels
        data[i] = newColor; // Red
        data[i + 1] = newColor; // Green
        data[i + 2] = newColor; // Blue
        // Alpha (data[i + 3]) is left untouched (fully opaque)
    }

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

    // Return the canvas element
    return canvas;
}