Image Color Palette Inversion And Bleed Tool

function processImage(originalImg, bleedIntensity = 8, bleedStyle = "soft") {
    // Parse and securely map constraints for parameters
    const radius = Math.max(0, parseInt(bleedIntensity, 10) || 8);
    // accepted styles: "soft", "harsh", "chromatic"
    const style = String(bleedStyle).toLowerCase();
    
    // Set up main working canvas
    const canvas = document.createElement('canvas');
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;
    
    // Safety check for empty image dimensions
    if (w === 0 || h === 0) {
        return canvas;
    }

    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    const imgData = ctx.getImageData(0, 0, w, h);
    const data = imgData.data;

    // We process differently based on the chosen bleed stylization
    if (style === 'chromatic') {
        const outData = new Uint8ClampedArray(data.length);
        for (let y = 0; y < h; y++) {
            for (let x = 0; x < w; x++) {
                const i = (y * w + x) * 4;
                
                // Offset displacements for spatial color bleed (R shifts right, B shifts left)
                const rX = Math.max(0, Math.min(w - 1, x + radius));
                const bX = Math.max(0, Math.min(w - 1, x - radius));
                
                const iR = (y * w + rX) * 4;
                const iB = (y * w + bX) * 4;

                // Invert the color palette AND apply the color bleed offset
                outData[i]     = 255 - data[iR];       // Red
                outData[i + 1] = 255 - data[i + 1];    // Green (center anchor)
                outData[i + 2] = 255 - data[iB + 2];   // Blue
                outData[i + 3] = data[i + 3];          // Preserve alpha channel
            }
        }
        ctx.putImageData(new ImageData(outData, w, h), 0, 0);
    } else {
        // Apply standard color palette inversion
        for (let i = 0; i < data.length; i += 4) {
            // Only invert visible colored pixels safely to prevent background artifact bloat
            if (data[i + 3] > 0) {
                data[i]     = 255 - data[i];
                data[i + 1] = 255 - data[i + 1];
                data[i + 2] = 255 - data[i + 2];
            }
        }
        // Commit inverted base image
        ctx.putImageData(imgData, 0, 0);

        if (radius > 0) {
            // Create a secondary canvas buffer to hold sharp inverted render
            const offscreen = document.createElement('canvas');
            offscreen.width = w;
            offscreen.height = h;
            const octx = offscreen.getContext('2d');
            octx.drawImage(canvas, 0, 0);

            // Establish the ink blend/glow bleed over top using optical filtering
            ctx.filter = `blur(${radius}px)`;
            
            if (style === 'harsh') {
                // Intense glowing neon / horror bleed
                ctx.globalCompositeOperation = 'color-dodge'; 
                ctx.globalAlpha = 0.9;
            } else {
                // Natural soft ink-like bloom bleed
                ctx.globalCompositeOperation = 'screen'; 
                ctx.globalAlpha = 0.7;
            }
            
            // Re-render and composite the blurred frame
            ctx.drawImage(offscreen, 0, 0);
            
            // Clean up drawing state logic
            ctx.globalAlpha = 1.0;
            ctx.globalCompositeOperation = 'source-over';
            ctx.filter = 'none';
        }
    }

    return canvas;
}