Image Toxic Waste Filter Effect Tool

function processImage(originalImg) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    
    // Set canvas dimensions to match the original image
    // Use naturalWidth and naturalHeight to get the intrinsic dimensions of the image,
    // which is important if the image element's display size is styled differently.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    
    // Get the 2D rendering context for the canvas
    const ctx = canvas.getContext('2d');

    // If context cannot be obtained or image has no dimensions, return an empty or minimally processed canvas.
    // This can happen if the image isn't loaded yet, resulting in naturalWidth/Height being 0.
    if (!ctx || canvas.width === 0 || canvas.height === 0) {
        // Draw the image (even if 0x0, to be consistent or if it loads later with these dimensions)
        // If image is truly 0x0, drawImage might not do anything, or context might be minimal.
        if (ctx) {
            try {
                ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
            } catch (e) {
                // Handle potential errors if originalImg is unusable (e.g., not fully loaded or broken)
                console.error("Error drawing image to canvas:", e);
            }
        }
        // For this task, we'll return the canvas as is.
        // In a real application, more robust error handling or a placeholder might be needed.
        return canvas; 
    }

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

    // Get the ImageData object, which contains the pixel data for the canvas region
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray

    // Iterate over each pixel in the image data
    // Each pixel consists of 4 values: R, G, B, A
    // So, we increment by 4 in each step
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];     // Red channel
        const g = data[i + 1]; // Green channel
        const b = data[i + 2]; // Blue channel
        // Alpha channel (data[i+3]) will be left unchanged for this filter

        // Apply "Toxic Waste" filter color transformation.
        // The goal is to make colors look greenish, yellowish, and unnatural,
        // simulating a "toxic" or "radioactive" appearance.
        // Coefficients are chosen experimentally to achieve this effect.
        
        // Red channel calculation:
        // Reduce original red, mix in some green to shift towards yellow/orange tones.
        let newR = r * 0.6 + g * 0.5;
        
        // Green channel calculation:
        // Significantly boost green, and add influences from red and blue to enhance the effect.
        let newG = g * 1.8 + r * 0.2 + b * 0.1;
        
        // Blue channel calculation:
        // Drastically reduce blue, add slight green/red for murky or darker tones,
        // or to prevent pure blues from looking out of place.
        let newB = b * 0.3 + g * 0.1 + r * 0.05;

        // Assign new pixel values
        // Math.round is used for rounding to the nearest integer.
        // Math.min ensures the value does not exceed 255.
        // Math.max ensures the value is not less than 0.
        // (Note: Uint8ClampedArray would automatically clamp values to 0-255,
        // but explicit clamping here is clearer and good practice if data were a regular array).
        data[i]     = Math.max(0, Math.min(255, Math.round(newR))); // New Red
        data[i + 1] = Math.max(0, Math.min(255, Math.round(newG))); // New Green
        data[i + 2] = Math.max(0, Math.min(255, Math.round(newB))); // New Blue
    }

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

    // Return the canvas element with the applied filter
    return canvas;
}