Destiny Harold Your Wife Image Effect Generator

function processImage(originalImg, topText = "DESTINY HAROLD", bottomText = "YOUR WIFE", textSizePercentage = 12, textColor = "#FFFFFF", strokeColor = "#000000", effectIntensity = 30) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions equal to the original image dimensions
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // Apply a dramatic contrast and vignette effect (Meme Style)
    if (effectIntensity > 0) {
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        const factor = (259 * (effectIntensity + 255)) / (255 * (259 - effectIntensity));
        
        // Loop through the pixels and increase contrast
        for (let i = 0; i < data.length; i += 4) {
            data[i]     = factor * (data[i] - 128) + 128;     // Red
            data[i + 1] = factor * (data[i + 1] - 128) + 128; // Green
            data[i + 2] = factor * (data[i + 2] - 128) + 128; // Blue
        }
        ctx.putImageData(imageData, 0, 0);

        // Apply a subtle vignette to emphasize the center
        const gradient = ctx.createRadialGradient(
            canvas.width / 2, canvas.height / 2, canvas.width * 0.2,
            canvas.width / 2, canvas.height / 2, Math.max(canvas.width, canvas.height) * 0.7
        );
        
        const maxAlpha = Math.min(0.7, effectIntensity / 100);
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, `rgba(0,0,0,${maxAlpha})`);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    // Prepare meme text styling
    const actualFontSize = Math.max(20, (canvas.height * (textSizePercentage / 100)));
    
    // Impact is the standard web-safe meme font
    ctx.font = `bold ${actualFontSize}px Impact, "Arial Black", sans-serif`;
    ctx.textAlign = 'center';
    ctx.fillStyle = textColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = Math.max(2, actualFontSize / 12);
    ctx.lineJoin = 'round'; // Smoother font strokes
    
    const maxWidth = canvas.width * 0.95;
    const padding = actualFontSize * 0.2;

    // Helper function to wrap text within the image bounds
    function wrapText(text) {
        const words = text.split(' ');
        let line = '';
        let lines = [];

        for (let n = 0; n < words.length; n++) {
            let testLine = line + words[n] + ' ';
            let metrics = ctx.measureText(testLine);
            let testWidth = metrics.width;
            
            if (testWidth > maxWidth && n > 0) {
                lines.push(line.trim());
                line = words[n] + ' ';
            } else {
                line = testLine;
            }
        }
        lines.push(line.trim());
        return lines;
    }

    // Draw Top Text
    if (topText) {
        ctx.textBaseline = 'top';
        const topLines = wrapText(topText.toUpperCase());
        let currentY = padding;
        
        topLines.forEach(line => {
            ctx.strokeText(line, canvas.width / 2, currentY);
            ctx.fillText(line, canvas.width / 2, currentY);
            currentY += actualFontSize;
        });
    }

    // Draw Bottom Text
    if (bottomText) {
        ctx.textBaseline = 'bottom';
        const bottomLines = wrapText(bottomText.toUpperCase());
        let currentY = canvas.height - padding;
        
        // Draw in reverse so the bottom-most line is closest to the edge
        for (let i = bottomLines.length - 1; i >= 0; i--) {
            ctx.strokeText(bottomLines[i], canvas.width / 2, currentY);
            ctx.fillText(bottomLines[i], canvas.width / 2, currentY);
            currentY -= actualFontSize;
        }
    }

    return canvas;
}