Image Color Shift Filter

function processImage(originalImg, newRedSource = "r", newGreenSource = "g", newBlueSource = "b") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to the original image's dimensions.
    // It's assumed originalImg is loaded and naturalWidth/naturalHeight are available.
    // If originalImg is not fully loaded, naturalWidth/naturalHeight might be 0.
    // For this function, we assume a loaded image as per common practice for such utility functions.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // Get the image data from the canvas.
    // ImageData contains the pixel data in a flat array (imageData.data),
    // where each pixel is represented by 4 consecutive values (R, G, B, A).
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This can happen due to security restrictions (e.g. tainted canvas from cross-origin image)
        // or if dimensions are invalid.
        console.error("Error getting ImageData:", e);
        // Return the canvas as is (with the original image drawn) or handle error as appropriate.
        // For this exercise, we might just let the error propagate or return the canvas.
        return canvas; 
    }
    
    const data = imageData.data;

    // Iterate over each pixel in the image data.
    // Each pixel consists of 4 components (R, G, B, A), so we increment by 4.
    for (let i = 0; i < data.length; i += 4) {
        const r_original = data[i];      // Original Red component of the current pixel
        const g_original = data[i + 1];  // Original Green component
        const b_original = data[i + 2];  // Original Blue component
        // The Alpha component (data[i + 3]) will be preserved.

        let finalR, finalG, finalB;

        // Determine the value for the new Red channel based on the newRedSource parameter
        switch (String(newRedSource).toLowerCase()) {
            case 'g': // Use original green channel value for new red
                finalR = g_original;
                break;
            case 'b': // Use original blue channel value for new red
                finalR = b_original;
                break;
            case 'r': // Use original red channel value for new red
                finalR = r_original;
                break;
            default:  // If newRedSource is an unrecognized value, default to original red
                finalR = r_original;
                break;
        }

        // Determine the value for the new Green channel based on the newGreenSource parameter
        switch (String(newGreenSource).toLowerCase()) {
            case 'r': // Use original red channel value for new green
                finalG = r_original;
                break;
            case 'b': // Use original blue channel value for new green
                finalG = b_original;
                break;
            case 'g': // Use original green channel value for new green
                finalG = g_original;
                break;
            default:  // If newGreenSource is an unrecognized value, default to original green
                finalG = g_original;
                break;
        }

        // Determine the value for the new Blue channel based on the newBlueSource parameter
        switch (String(newBlueSource).toLowerCase()) {
            case 'r': // Use original red channel value for new blue
                finalB = r_original;
                break;
            case 'g': // Use original green channel value for new blue
                finalB = g_original;
                break;
            case 'b': // Use original blue channel value for new blue
                finalB = b_original;
                break;
            default:  // If newBlueSource is an unrecognized value, default to original blue
                finalB = b_original;
                break;
        }

        // Assign the calculated new channel values back to the pixel data array
        data[i] = finalR;
        data[i + 1] = finalG;
        data[i + 2] = finalB;
        // Alpha channel (data[i + 3]) remains untouched, preserving transparency.
    }

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

    // Return the canvas element, which now displays the color-shifted image
    return canvas;
}