Image Rainbow Sherbet Filter Effect Tool

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the canvas has the same dimensions as the original image
    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
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // Define the strength of the brightness boost common in sherbet aesthetics
    const brightnessBoost = 25;

    // Iterate over each pixel (each pixel has 4 components: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];     // Red channel
        let g = data[i + 1]; // Green channel
        let b = data[i + 2]; // Blue channel
        // Alpha channel (data[i+3]) is usually kept unchanged for filters like this

        // Apply color transformation matrix and channel mixing
        // These coefficients are chosen to shift colors towards a sherbet palette
        // (pinks, oranges, limes, light blues/lavenders) and increase vibrancy.

        // Transform Red: boost red, mix with green for orange tones, mix with blue for pink tones
        let newR = (r * 1.1) + (g * 0.1) + (b * 0.2);
        // Transform Green: maintain green strength, mix with red for lime/yellow tones, mix with blue for cyan tones
        let newG = (r * 0.1) + (g * 1.0) + (b * 0.1);
        // Transform Blue: boost blue, mix with red for lavender tones, mix with green for aqua tones
        let newB = (r * 0.2) + (g * 0.1) + (b * 1.1);

        // Apply brightness boost
        newR += brightnessBoost;
        newG += brightnessBoost;
        newB += brightnessBoost;

        // Clamp values to the valid 0-255 range
        data[i]   = Math.max(0, Math.min(255, newR));
        data[i+1] = Math.max(0, Math.min(255, newG));
        data[i+2] = Math.max(0, Math.min(255, newB));
        // data[i+3] remains a (alpha channel)
    }

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

    // Return the canvas element
    return canvas;
}