YouTube Video Editor Style Effects And Harsh Filter Image Tool

function processImage(originalImg, effectType = 'harsh', noticeText = 'Notice: This user is deleted or formerly deleted.', intensity = 5) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

    // Draw original image
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Get pixel data for manipulation
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;

    // Apply Video Editor style effects
    const effect = effectType.toLowerCase();

    if (effect === 'harsh') {
        // Harsh/Deep Fried: Extremely high contrast, over-saturation, and added noise
        const contrast = intensity * 15; // Maps to strong contrast
        const factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
        const satAmount = 1 + (intensity * 0.4);

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

            // Contrast
            r = factor * (r - 128) + 128;
            g = factor * (g - 128) + 128;
            b = factor * (b - 128) + 128;

            // Saturation & slight red tinting for harshness
            let gray = 0.2989 * r + 0.5870 * g + 0.1140 * b;
            r = gray + (r - gray) * satAmount + (intensity * 3);
            g = gray + (g - gray) * satAmount;
            b = gray + (b - gray) * satAmount;

            // Noise (Grain)
            let noise = (Math.random() - 0.5) * intensity * 8;
            
            data[i] = r + noise;
            data[i + 1] = g + noise;
            data[i + 2] = b + noise;
        }
    } 
    else if (effect === 'thermal') {
        // Thermal camera style map
        for (let i = 0; i < data.length; i += 4) {
            let r = data[i], g = data[i + 1], b = data[i + 2];
            let lum = (0.2989 * r + 0.5870 * g + 0.1140 * b);
            
            if (lum < 64) {
                data[i] = 0; data[i + 1] = 0; data[i + 2] = lum * 4;
            } else if (lum < 128) {
                data[i] = (lum - 64) * 4; data[i + 1] = 0; data[i + 2] = 255 - (lum - 64) * 4;
            } else if (lum < 192) {
                data[i] = 255; data[i + 1] = (lum - 128) * 4; data[i + 2] = 0;
            } else {
                data[i] = 255; data[i + 1] = 255; data[i + 2] = (lum - 192) * 4;
            }
        }
    } 
    else if (effect === 'neon') {
        // Neon / Find Edges
        let tempData = new Uint8ClampedArray(data);
        for (let y = 1; y < height - 1; y++) {
            for (let x = 1; x < width - 1; x++) {
                let idx = (y * width + x) * 4;
                
                // Simple edge detection kernel
                let rX = -tempData[idx - 4] + tempData[idx + 4];
                let gX = -tempData[idx - 4 + 1] + tempData[idx + 4 + 1];
                let bX = -tempData[idx - 4 + 2] + tempData[idx + 4 + 2];

                let rY = -tempData[idx - width * 4] + tempData[idx + width * 4];
                let gY = -tempData[idx - width * 4 + 1] + tempData[idx + width * 4 + 1];
                let bY = -tempData[idx - width * 4 + 2] + tempData[idx + width * 4 + 2];

                data[idx] = Math.min(255, (Math.abs(rX) + Math.abs(rY)) * (intensity / 3));
                data[idx + 1] = Math.min(255, (Math.abs(gX) + Math.abs(gY)) * (intensity / 3) + 20); // greenish tint
                data[idx + 2] = Math.min(255, (Math.abs(bX) + Math.abs(bY)) * (intensity / 3));
            }
        }
    }

    // Apply the manipulated image data back
    ctx.putImageData(imgData, 0, 0);

    // Render Wiki-style Notice Template Overlay
    if (noticeText && noticeText.trim().length > 0) {
        const boxWidth = Math.min(width * 0.9, 800);
        const boxHeight = Math.max(height * 0.15, 70);
        const pX = (width - boxWidth) / 2;
        const pY = pX; 

        // Draw shadow
        ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
        ctx.fillRect(pX + 5, pY + 5, boxWidth, boxHeight);

        // Draw box background
        ctx.fillStyle = '#f8f9fa';
        ctx.fillRect(pX, pY, boxWidth, boxHeight);

        // Draw left ambox border (Red line commonly seen on deletion templates)
        ctx.fillStyle = '#d33';
        ctx.fillRect(pX, pY, 12, boxHeight);

        // Draw outer box border
        ctx.strokeStyle = '#a2a9b1';
        ctx.lineWidth = 1;
        ctx.strokeRect(pX, pY, boxWidth, boxHeight);

        // Draw Alert Icon
        const iconCenterX = pX + 35;
        const iconCenterY = pY + boxHeight / 2;
        ctx.beginPath();
        ctx.arc(iconCenterX, iconCenterY, 16, 0, Math.PI * 2);
        ctx.fillStyle = '#d33';
        ctx.fill();
        ctx.fillStyle = 'white';
        ctx.font = 'bold 22px Arial, sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('!', iconCenterX, iconCenterY);

        // Render wrapping text
        function wrapText(context, text, x, y, maxWidth, lineHeight) {
            const words = text.split(' ');
            let line = '';
            let lines = [];
            for (let n = 0; n < words.length; n++) {
                let testLine = line + words[n] + ' ';
                let metrics = context.measureText(testLine);
                if (metrics.width > maxWidth && n > 0) {
                    lines.push(line);
                    line = words[n] + ' ';
                } else {
                    line = testLine;
                }
            }
            lines.push(line);
            
            // Re-adjust starting Y to center text vertically
            let startY = y - ((lines.length - 1) * lineHeight) / 2;
            for (let i = 0; i < lines.length; i++) {
                context.fillText(lines[i], x, startY + (i * lineHeight));
            }
        }

        ctx.fillStyle = '#202122';
        ctx.textAlign = 'left';
        
        let fontSize = Math.floor(boxHeight * 0.25);
        fontSize = Math.max(12, Math.min(fontSize, 20));

        ctx.font = fontSize + 'px Helvetica, Arial, sans-serif';
        
        const textX = pX + 70;
        const textY = pY + boxHeight / 2;
        const maxTextWidth = boxWidth - 85;

        wrapText(ctx, noticeText, textX, textY, maxTextWidth, fontSize * 1.3);
    }

    return canvas;
}