Photo Full Spectrum Filter Effect Tool

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can be a hint for performance optimization
    // if getImageData/putImageData are used frequently, though here it's once per call.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Use naturalWidth and naturalHeight to get the intrinsic dimensions of the image.
    // originalImg.width/height might reflect CSS dimensions if it's an <img> element from the DOM.
    // For an Image object created via `new Image()`, .width and .height are typically
    // the natural dimensions once the image is loaded.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

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

    // Get the ImageData object. Note: This can throw a SecurityError if the image
    // is loaded from a different origin without CORS headers, tainting the canvas.
    // The problem description implies a working scenario, so error handling for this
    // is omitted for brevity.
    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // Iterate over each pixel in the image. Each pixel consists of 4 components (R, G, B, A).
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];     // Original Red value
        const g = data[i + 1]; // Original Green value
        const b = data[i + 2]; // Original Blue value
        // const a = data[i + 3]; // Original Alpha value (opacity), remains unchanged

        // Apply a "Full Spectrum Filter Effect".
        // A common digital simulation for effects like false-color infrared (e.g., Kodak Aerochrome style)
        // involves swapping color channels. Here, we'll swap the Red and Green channels.
        // - New Red channel value becomes the original Green channel value.
        // - New Green channel value becomes the original Red channel value.
        // - Blue channel remains unchanged.
        // This transformation typically results in:
        //   - Green elements (like foliage) appearing red.
        //   - Red elements appearing green.
        //   - Blue elements (like skies, water) remaining blue.
        
        data[i]     = g; // Set the new Red component to the original Green value
        data[i + 1] = r; // Set the new Green component to the original Red value
        data[i + 2] = b; // Blue component remains unchanged
        // Alpha component (data[i + 3]) also remains unchanged.
    }

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

    // Return the canvas element with the processed image
    return canvas;
}