Image Malay Media Editor

/**
 * A basic "Malay Media Editor" that adds a styled text overlay and an optional frame to an image.
 * This tool is designed to mimic the creation of simple social media graphics or news overlays,
 * with defaults inspired by Malaysian themes (e.g., Malay text, national flag colors).
 * It supports multi-line text and dynamically adjusts font size for better fitting.
 *
 * @param {HTMLImageElement} originalImg The original image object to be edited.
 * @param {string} textOverlay The text to display on the image. Use '\n' for line breaks.
 * @param {string} textColor The CSS color of the main text fill (e.g., '#FFFFFF').
 * @param {string} textStrokeColor The CSS color for the text outline.
 * @param {number} textStrokeWidth The width of the text outline in pixels. Set to 0 for no stroke.
 * @param {string} textPosition The verical position of the text ('top', 'center', or 'bottom').
 * @param {number} fontSize The desired maximum font size in pixels. It may be scaled down for smaller images.
 * @param {string} fontFamily A CSS font-family string (e.g., 'Impact, Arial Black, sans-serif').
 * @param {string} frameColor The CSS color of the border frame. Leave empty or set frameWidth to 0 for no frame.
 * @param {number} frameWidth The width of the frame in pixels.
 * @returns {HTMLCanvasElement} A new canvas element containing the edited image.
 */
function processImage(
    originalImg,
    textOverlay = 'Selamat Hari Merdeka!',
    textColor = '#FFFFFF',
    textStrokeColor = '#000000',
    textStrokeWidth = 5,
    textPosition = 'bottom',
    fontSize = 80,
    fontFamily = 'Impact, Arial Black, sans-serif',
    frameColor = '#FF0000',
    frameWidth = 20
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Cap image dimensions for performance and stability
    const MAX_DIMENSION = 4096;
    let width = originalImg.naturalWidth;
    let height = originalImg.naturalHeight;

    if (width > MAX_DIMENSION || height > MAX_DIMENSION) {
        const ratio = Math.min(MAX_DIMENSION / width, MAX_DIMENSION / height);
        width = Math.round(width * ratio);
        height = Math.round(height * ratio);
    }

    canvas.width = width;
    canvas.height = height;

    // Draw the original image, scaled if necessary
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Add text overlay if provided
    if (textOverlay && String(textOverlay).trim() !== '') {
        // Dynamically adjust font size based on image width to prevent overflow
        const dynamicFontSize = Math.min(fontSize, width / 10);
        ctx.font = `bold ${dynamicFontSize}px ${fontFamily}`;
        ctx.fillStyle = textColor;
        ctx.strokeStyle = textStrokeColor;
        ctx.lineWidth = textStrokeWidth;
        ctx.textAlign = 'center';

        const lines = String(textOverlay).split('\n');
        const lineHeight = dynamicFontSize * 1.2; // 1.2 line spacing for readability

        let y_start;
        const textBlockHeight = (lines.length - 1) * lineHeight;

        // Calculate vertical position for the block of text
        switch (textPosition.toLowerCase()) {
            case 'top':
                ctx.textBaseline = 'top';
                y_start = dynamicFontSize * 0.5; // Add some padding from the top
                break;
            case 'center':
                ctx.textBaseline = 'middle';
                y_start = (height / 2) - textBlockHeight / 2;
                break;
            case 'bottom':
            default:
                ctx.textBaseline = 'bottom';
                // Calculate y for the first line based on where the last line should be
                const lastLine_y = height - (dynamicFontSize * 0.5);
                y_start = lastLine_y - textBlockHeight;
                break;
        }

        // Draw each line of text
        lines.forEach((line, index) => {
            const y = y_start + (index * lineHeight);
            if (textStrokeWidth > 0) {
                ctx.strokeText(line, width / 2, y);
            }
            ctx.fillText(line, width / 2, y);
        });
    }

    // Add a frame if a color and width are specified
    if (frameColor && frameColor.trim() !== '' && frameWidth > 0) {
        ctx.strokeStyle = frameColor;
        // lineWidth is drawn centered on the path. To make it appear fully inside,
        // we set the width and draw the rect inset by half the width.
        ctx.lineWidth = frameWidth;
        const inset = frameWidth / 2;
        ctx.strokeRect(inset, inset, width - frameWidth, height - frameWidth);
    }

    return canvas;
}