Image Application Tool

/**
 * Applies a specified filter to an image.
 * Given the generic tool name, this function provides a common image application:
 * applying a visual filter like grayscale, sepia, or invert.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} filterType The type of filter to apply. Can be "grayscale", "sepia", or "invert". Defaults to "grayscale".
 * @param {number} intensity The intensity of the filter effect, from 0.0 (no effect) to 1.0 (full effect). Defaults to 1.0.
 * @returns {HTMLCanvasElement} A new canvas element with the filtered image.
 */
function processImage(originalImg, filterType = "grayscale", intensity = 1.0) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the original image is valid and has dimensions
    if (!originalImg || !originalImg.width || !originalImg.height) {
        console.error("Invalid image provided.");
        // Return an empty canvas as a fallback
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

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

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

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

    // Clamp intensity value between 0.0 and 1.0
    const clampedIntensity = Math.max(0.0, Math.min(1.0, intensity));

    // 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];

        let newR, newG, newB;

        // Apply the selected filter logic
        switch (filterType.toLowerCase()) {
            case "sepia":
                newR = Math.min(255, (r * 0.393) + (g * 0.769) + (b * 0.189));
                newG = Math.min(255, (r * 0.349) + (g * 0.686) + (b * 0.168));
                newB = Math.min(255, (r * 0.272) + (g * 0.534) + (b * 0.131));
                break;
            case "invert":
                newR = 255 - r;
                newG = 255 - g;
                newB = 255 - b;
                break;
            case "grayscale":
            default:
                const gray = 0.299 * r + 0.587 * g + 0.114 * b;
                newR = gray;
                newG = gray;
                newB = gray;
                break;
        }

        // Blend the original pixel with the filtered pixel based on intensity
        data[i] = r * (1 - clampedIntensity) + newR * clampedIntensity;
        data[i + 1] = g * (1 - clampedIntensity) + newG * clampedIntensity;
        data[i + 2] = b * (1 - clampedIntensity) + newB * clampedIntensity;
    }

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

    // Return the canvas element
    return canvas;
}