Image Mode Switcher

/**
 * Switches the color mode of an image.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 * @param {string} mode The target mode. Can be 'color', 'grayscale', 'sepia', 'invert', or 'binary'. Defaults to 'grayscale'.
 * @param {number} threshold The brightness threshold (0-255) for 'binary' mode. Defaults to 128.
 * @returns {HTMLCanvasElement} A canvas element with the processed image.
 */
function processImage(originalImg, mode = 'grayscale', threshold = 128) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // If the mode is 'color', no processing is needed.
    if (mode === 'color') {
        return canvas;
    }

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

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

            switch (mode) {
                case 'grayscale':
                    // Apply grayscale effect using the luminosity formula
                    const gray = 0.299 * r + 0.587 * g + 0.114 * b;
                    data[i] = gray;     // red
                    data[i + 1] = gray; // green
                    data[i + 2] = gray; // blue
                    break;
                
                case 'sepia':
                    // Apply sepia effect
                    const sr = 0.393 * r + 0.769 * g + 0.189 * b;
                    const sg = 0.349 * r + 0.686 * g + 0.168 * b;
                    const sb = 0.272 * r + 0.534 * g + 0.131 * b;
                    data[i] = Math.min(255, sr);
                    data[i + 1] = Math.min(255, sg);
                    data[i + 2] = Math.min(255, sb);
                    break;

                case 'invert':
                    // Invert colors
                    data[i] = 255 - r;
                    data[i + 1] = 255 - g;
                    data[i + 2] = 255 - b;
                    break;

                case 'binary':
                    // Convert to black and white based on a threshold
                    const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
                    const color = brightness > threshold ? 255 : 0;
                    data[i] = color;
                    data[i + 1] = color;
                    data[i + 2] = color;
                    break;

                default:
                    // For any unknown mode, do nothing.
                    break;
            }
        }

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

    } catch (e) {
        // Handle potential security errors with cross-origin images
        console.error("Could not process the image. If loading from a URL, ensure it supports CORS.", e);
        // Draw a placeholder or message on the canvas
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, width, height);
        ctx.fillStyle = 'black';
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('Error processing image.', width / 2, height / 2);
    }
    
    return canvas;
}