Image RGBA Channel Swapper

/**
 * Swaps the Red, Green, Blue, and Alpha channels of an image based on a specified order.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {string} channelOrder A 4-character string specifying the new order of channels.
 *   It must contain each of 'R', 'G', 'B', and 'A' exactly once.
 *   For example, "BGRA" swaps the red and blue channels.
 *   Defaults to "BGRA".
 * @returns {HTMLCanvasElement} A new canvas element with the RGBA channels swapped.
 */
function processImage(originalImg, channelOrder = "BGRA") {
    // Create a canvas element to draw the image and manipulate its pixels
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    // Set canvas dimensions to match the original 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);

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

    // --- Parameter Validation ---
    // Ensure channelOrder is a valid 4-character string containing R, G, B, A.
    // If not, default to "RGBA" which results in no change.
    let finalChannelOrder = "RGBA";
    if (typeof channelOrder === 'string' &&
        channelOrder.length === 4 &&
        channelOrder.toUpperCase().split('').sort().join('') === "ABGR") {
        finalChannelOrder = channelOrder.toUpperCase();
    } else {
        console.warn(`Invalid channelOrder: "${channelOrder}". It must be a 4-character string containing 'R', 'G', 'B', and 'A' exactly once. Falling back to "RGBA" (no change).`);
    }

    // If the final order is the original order, we can skip the processing.
    if (finalChannelOrder === "RGBA") {
        return canvas;
    }

    // Iterate through every pixel in the imageData array.
    // Each pixel is represented by 4 consecutive values (R, G, B, A).
    for (let i = 0; i < data.length; i += 4) {
        // Store the original RGBA values for the current pixel
        const originalPixel = {
            'R': data[i],
            'G': data[i + 1],
            'B': data[i + 2],
            'A': data[i + 3]
        };

        // Re-assign the RGBA values based on the desired channel order
        data[i] = originalPixel[finalChannelOrder[0]]; // New Red
        data[i + 1] = originalPixel[finalChannelOrder[1]]; // New Green
        data[i + 2] = originalPixel[finalChannelOrder[2]]; // New Blue
        data[i + 3] = originalPixel[finalChannelOrder[3]]; // New Alpha
    }

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

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