Image Voice Dropped 3 Octaves Effect Generator

function processImage(originalImg, intensity = 1.0, wideEffect = "false", applyZoomBlur = "true", redBoost = 2.0) {
    const canvas = document.createElement('canvas');
    let width = originalImg.width;
    let height = originalImg.height;
    
    // Stretch to create the "wide" meme effect commonly associated with pitched-down audio
    if (String(wideEffect).toLowerCase() === "true") {
        width = Math.floor(width * 1.5);
        height = Math.floor(height * 0.8);
    }
    
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Draw base image on an off-screen canvas to use as a source
    const baseCanvas = document.createElement('canvas');
    baseCanvas.width = width;
    baseCanvas.height = height;
    const bctx = baseCanvas.getContext('2d');
    bctx.drawImage(originalImg, 0, 0, width, height);

    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, width, height);
    
    // Draw the unblurred base layer
    ctx.drawImage(baseCanvas, 0, 0);

    // Apply Zoom Blur Effect for that intense "shaking/zooming" look
    if (String(applyZoomBlur).toLowerCase() === "true") {
        const passes = 25;
        const maxScale = 1 + (0.5 * parseFloat(intensity));
        for (let i = 1; i <= passes; i++) {
            let scale = 1 + ((maxScale - 1) * (i / passes));
            ctx.globalAlpha = 0.12; 
            ctx.save();
            ctx.translate(width / 2, height / 2);
            ctx.scale(scale, scale);
            ctx.translate(-width / 2, -height / 2);
            ctx.drawImage(baseCanvas, 0, 0);
            ctx.restore();
        }
        ctx.globalAlpha = 1.0;
    }

    // Direct Pixel Manipulation for the "Demonic Deep-Fried" aesthetic
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;

    const intensNum = parseFloat(intensity);
    // Calculate heavy contrast modifier
    const contrast = 1 + (1.5 * intensNum);
    const intercept = 128 * (1 - contrast);
    const rb = parseFloat(redBoost);

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // 1. High contrast filter
        r = r * contrast + intercept;
        g = g * contrast + intercept;
        b = b * contrast + intercept;

        // 2. Red demonic tint (suppress green and blue severely)
        r = r * rb;
        g = g * 0.35;
        b = b * 0.35;

        // 3. Add static noise for a "deep-fried" feel
        if (intensNum > 0) {
            const noise = (Math.random() - 0.5) * 60 * intensNum;
            r += noise;
            g += noise;
            b += noise;
        }

        // Clamp channels between 0 and 255
        data[i]     = Math.min(255, Math.max(0, r));
        data[i + 1] = Math.min(255, Math.max(0, g));
        data[i + 2] = Math.min(255, Math.max(0, b));
    }

    // Apply altered pixels to the canvas
    ctx.putImageData(imgData, 0, 0);

    // Apply a heavy dark Vignette to frame the subject ominously
    const cx = width / 2;
    const cy = height / 2;
    const radius = Math.max(cx, cy) * 1.3;
    const gradient = ctx.createRadialGradient(cx, cy, radius * 0.3, cx, cy, radius);
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(1, `rgba(0,0,0,${Math.min(1, 0.85 * intensNum)})`);
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);

    return canvas;
}