Image Effect Generator

function processImage(originalImg, effectName = 'glitch', intensity = 50) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

    // Normalize inputs
    const effect = effectName.toLowerCase().trim();
    let filterStr = 'none';

    // Handle pixelate separately since it doesn't use standard CSS filters
    if (effect === 'pixelate') {
        const blockSize = Math.max(1, intensity);
        const w = Math.max(1, width / blockSize);
        const h = Math.max(1, height / blockSize);
        
        const offCanvas = document.createElement('canvas');
        offCanvas.width = w;
        offCanvas.height = h;
        const offCtx = offCanvas.getContext('2d');
        
        // Draw scaled down
        offCtx.drawImage(originalImg, 0, 0, w, h);
        
        // Draw scaled up back onto main canvas without aliasing smoothing
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(offCanvas, 0, 0, w, h, 0, 0, width, height);
        return canvas;
    }

    // Set standard filter strings based on the chosen effect
    switch (effect) {
        case 'grayscale':
            filterStr = `grayscale(${intensity}%)`;
            break;
        case 'sepia':
            filterStr = `sepia(${intensity}%)`;
            break;
        case 'invert':
            filterStr = `invert(${intensity}%)`;
            break;
        case 'blur':
            filterStr = `blur(${intensity / 10}px)`;
            break;
        case 'brightness':
            filterStr = `brightness(${intensity}%)`;
            break;
        case 'contrast':
            filterStr = `contrast(${intensity}%)`;
            break;
        case 'hue-rotate':
            filterStr = `hue-rotate(${intensity}deg)`;
            break;
        case 'saturate':
            filterStr = `saturate(${intensity}%)`;
            break;
        case 'deepfry':
            // Combines multiple heavy filters for the classic "deep fried" meme look
            filterStr = `contrast(${100 + intensity * 2}%) saturate(${100 + intensity * 4}%) brightness(${100 + intensity * 0.2}%) sepia(${intensity * 0.2}%)`;
            break;
        case 'glitch':
        default:
            // "Not sure what I did to this..." chaotic default
            filterStr = 'none';
            break;
    }

    // Apply the standardized filters and draw original image
    ctx.filter = filterStr;
    ctx.drawImage(originalImg, 0, 0, width, height);
    ctx.filter = 'none'; // Reset filter to prevent subsequent overwrites

    // Apply Glitch Effect (RGB color separation and slicing)
    if (effect === 'glitch' || effect === 'none' || filterStr === 'none') {
        const imgData = ctx.getImageData(0, 0, width, height);
        const data = imgData.data;
        const originalData = new Uint8ClampedArray(data); // Clone data to prevent ghosting
        const shift = Math.max(1, Math.floor(intensity / 2));

        // Shift color channels
        for (let i = 0; i < data.length; i += 4) {
            // Shift red channel left
            if (i - shift * 4 >= 0) {
                data[i - shift * 4] = originalData[i]; 
            }
            // Shift blue channel right
            if (i + shift * 4 < data.length) {
                data[i + shift * 4 + 2] = originalData[i + 2]; 
            }
        }
        ctx.putImageData(imgData, 0, 0);

        // Apply chaotic horizontal block shifts
        const sliceCount = Math.max(1, Math.floor(intensity / 3));
        for (let i = 0; i < sliceCount; i++) {
            const sy = Math.random() * height;
            const sh = Math.random() * (height / 10) + 5; // Random slice height
            const dx = (Math.random() - 0.5) * intensity * 2; // Random horizontal shift magnitude
            
            // Draw slice displaced
            ctx.drawImage(canvas, 0, sy, width, sh, dx, sy, width, sh);
        }
    }

    return canvas;
}