Technoblade Sad Cancer Battle Major Image Effect Generator

function processImage(originalImg, effectIntensity = "1", customMessage = "TECHNOBLADE NEVER DIES o7") {
    // Parse intensity as a number
    const intensity = Math.max(0, Math.min(1, Number(effectIntensity) || 1));

    // Create a new canvas to process the image
    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 the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Fetch pixel data
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;
    const sourceData = new Uint8ClampedArray(data); // Copy for chromatic aberration offset

    // Center coordinates and max distance for vignette
    const cx = width / 2;
    const cy = height / 2;
    const maxDist = Math.sqrt(cx * cx + cy * cy);

    // Chromatic aberration offset based on intensity (simulates a distorted "Major" effect)
    const splitOffset = Math.floor((width * 0.01) * intensity); 

    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const i = (y * width + x) * 4;
            
            // X-coordinates for the red and blue channels offset
            const rx = Math.max(0, x - splitOffset);
            const bx = Math.min(width - 1, x + splitOffset);
            
            const ri = (y * width + rx) * 4;
            const bi = (y * width + bx) * 4;
            
            // Extract channels with an artificial RGB split for the "Major" distortion feel
            let r = sourceData[ri];
            let g = sourceData[i + 1];
            let b = sourceData[bi + 2];

            // Calculate apparent brightness (grayscale)
            const gray = (r * 0.299 + g * 0.587 + b * 0.114);

            // Cold, sad blue tint: desaturated and slightly darker
            const sadR = gray * 0.65;
            const sadG = gray * 0.75;
            const sadB = gray * 1.15;

            // Blend current colors with the sad effect colors based on intensity
            r = r * (1 - intensity) + sadR * intensity;
            g = g * (1 - intensity) + sadG * intensity;
            b = b * (1 - intensity) + sadB * intensity;

            // Vignette to darken edges radically for a somber atmosphere
            const dist = Math.sqrt((x - cx) ** 2 + (y - cy) ** 2);
            const vignette = 1 - (dist / maxDist) * 0.85 * intensity; 
            
            // Film grain / noise to make it feel grittier
            const noise = (Math.random() - 0.5) * 30 * intensity;

            // Apply modifications and clamp between 0-255
            data[i]     = Math.min(255, Math.max(0, (r + noise) * vignette));
            data[i + 1] = Math.min(255, Math.max(0, (g + noise) * vignette));
            data[i + 2] = Math.min(255, Math.max(0, (b + noise) * vignette));
            // Alpha channel remains unchanged (data[i + 3])
        }
    }

    // Put modified pixels back to the canvas
    ctx.putImageData(imgData, 0, 0);

    // Add a dark tearing/rain overlay or film scratches
    const scratchCount = Math.floor(150 * intensity);
    for (let i = 0; i < scratchCount; i++) {
        const x = Math.random() * width;
        const y = Math.random() * height;
        const h = Math.random() * (height * 0.4);
        
        ctx.beginPath();
        ctx.moveTo(x, y);
        // Angled slightly for a falling rain or deep scratch visual
        ctx.lineTo(x - (h * 0.05), y + h); 
        
        // Randomly alternate between dark and light vertical streaks
        if (Math.random() > 0.5) {
            ctx.strokeStyle = `rgba(255, 255, 255, ${Math.random() * 0.1})`;
        } else {
            ctx.strokeStyle = `rgba(0, 0, 0, ${Math.random() * 0.2})`;
        }
        
        ctx.lineWidth = Math.random() * 2;
        ctx.stroke();
    }

    // Add the dramatic tribute text
    if (customMessage) {
        let fontSize = Math.floor(height * 0.08); // Responsive font size
        // Ensure text is not too large or too small
        if (fontSize < 16) fontSize = 16;
        if (fontSize > 120) fontSize = 120;
        
        ctx.font = `bold ${fontSize}px Impact, Arial, sans-serif`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        
        const textX = width / 2;
        const textY = height - (height * 0.05); // Margins from bottom

        // Draw a thick black stroke around text for readability over dark backgrounds
        ctx.lineWidth = Math.max(3, fontSize * 0.05);
        ctx.strokeStyle = 'black';
        ctx.strokeText(customMessage, textX, textY);
        
        // Fill softly tinted white text
        ctx.fillStyle = 'rgba(235, 245, 255, 0.9)';
        ctx.fillText(customMessage, textX, textY);
    }

    return canvas;
}