Image Video Editor

/**
 * An all-in-one image processing function that mimics a photo editor.
 * It can apply filters, adjust colors, add text overlays, and perform transformations.
 * This function is async to handle dynamic loading of non-websafe fonts from Google Fonts.
 *
 * @param {Image} originalImg The original Javascript Image object to process.
 * @param {string} [filter='none'] The main filter to apply. Can be 'none', 'grayscale', 'sepia', or 'invert'.
 * @param {number} [brightness=100] The brightness percentage (0-200). 100 is no change.
 * @param {number} [contrast=100] The contrast percentage (0-200). 100 is no change.
 * @param {number} [saturation=100] The saturation percentage (0-200). 100 is no change.
 * @param {string} [text=''] The text to overlay on the image. Use '\n' for line breaks.
 * @param {number} [textSize=48] The font size of the text in pixels.
 * @param {string} [textColor='#FFFFFF'] The color of the text (e.g., hex code).
 * @param {string} [textFont='Arial'] The font family for the text. Can be a websafe font or a Google Font name.
 * @param {string} [textOutlineColor='#000000'] The color of the text outline.
 * @param {number} [textOutlineWidth=2] The width of the text outline in pixels. Set to 0 to disable.
 * @param {string} [textPosition='center'] The position of the text. Options: 'top-left', 'top-center', 'top-right', 'center-left', 'center', 'center-right', 'bottom-left', 'bottom-center', 'bottom-right'.
 * @param {number} [rotation=0] The rotation angle in degrees.
 * @param {number} [flipHorizontal=0] Set to 1 to flip the image horizontally, 0 otherwise.
 * @param {number} [flipVertical=0] Set to 1 to flip the image vertically, 0 otherwise.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the processed canvas element.
 */
async function processImage(
    originalImg,
    filter = 'none',
    brightness = 100,
    contrast = 100,
    saturation = 100,
    text = '',
    textSize = 48,
    textColor = '#FFFFFF',
    textFont = 'Arial',
    textOutlineColor = '#000000',
    textOutlineWidth = 2,
    textPosition = 'center',
    rotation = 0,
    flipHorizontal = 0,
    flipVertical = 0
) {
    // 1. DYNAMIC FONT LOADING
    // If a non-websafe font is specified, try to load it from Google Fonts.
    const webSafeFonts = ['Arial', 'Verdana', 'Helvetica', 'Tahoma', 'Trebuchet MS', 'Times New Roman', 'Georgia', 'Garamond', 'Courier New', 'Brush Script MT'];
    if (!webSafeFonts.includes(textFont)) {
        try {
            if (!document.fonts.check(`${textSize}px ${textFont}`)) {
                const fontName = textFont.replace(/ /g, '+');
                const fontUrl = `https://fonts.googleapis.com/css2?family=${fontName}:wght@400;700&display=swap`;
                if (!document.querySelector(`link[href="${fontUrl}"]`)) {
                    const link = document.createElement('link');
                    link.href = fontUrl;
                    link.rel = 'stylesheet';
                    document.head.appendChild(link);
                    await document.fonts.load(`${textSize}px ${textFont}`);
                }
            }
        } catch (e) {
            console.warn(`Could not load font "${textFont}". Falling back to Arial.`, e);
            textFont = 'Arial';
        }
    }

    // 2. CANVAS SETUP
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const originalWidth = originalImg.width;
    const originalHeight = originalImg.height;

    // Calculate canvas dimensions to fit the rotated image
    const radians = rotation * Math.PI / 180;
    const absCos = Math.abs(Math.cos(radians));
    const absSin = Math.abs(Math.sin(radians));
    canvas.width = Math.round(originalWidth * absCos + originalHeight * absSin);
    canvas.height = Math.round(originalWidth * absSin + originalHeight * absCos);

    // 3. IMAGE DRAWING WITH FILTERS AND TRANSFORMATIONS
    ctx.save();

    // Build the CSS filter string from parameters
    let filterString = '';
    if (filter === 'grayscale') filterString += 'grayscale(1) ';
    else if (filter === 'sepia') filterString += 'sepia(1) ';
    else if (filter === 'invert') filterString += 'invert(1) ';
    if (brightness !== 100) filterString += `brightness(${brightness / 100}) `;
    if (contrast !== 100) filterString += `contrast(${contrast / 100}) `;
    if (saturation !== 100) filterString += `saturate(${saturation / 100}) `;
    ctx.filter = filterString.trim();

    // Center the canvas context for transformations
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(radians);
    ctx.scale(flipHorizontal ? -1 : 1, flipVertical ? -1 : 1);

    // Draw the image centered on the transformed origin
    ctx.drawImage(originalImg, -originalWidth / 2, -originalHeight / 2, originalWidth, originalHeight);
    ctx.restore();

    // 4. TEXT OVERLAY
    if (text && text.trim() !== '') {
        ctx.font = `${textSize}px "${textFont}"`;
        ctx.fillStyle = textColor;
        ctx.strokeStyle = textOutlineColor;
        ctx.lineWidth = textOutlineWidth;

        let x, y, textAlign, textBaseline;
        const margin = textSize * 0.4;
        const parts = textPosition.split('-');
        const vAlign = parts[0];
        const hAlign = parts.length > 1 ? parts[1] : 'center';

        switch (hAlign) {
            case 'left': x = margin; textAlign = 'left'; break;
            case 'right': x = canvas.width - margin; textAlign = 'right'; break;
            default: x = canvas.width / 2; textAlign = 'center'; break;
        }

        switch (vAlign) {
            case 'top': y = margin; textBaseline = 'top'; break;
            case 'bottom': y = canvas.height - margin; textBaseline = 'bottom'; break;
            default: y = canvas.height / 2; textBaseline = 'middle'; break;
        }
        ctx.textAlign = textAlign;
        ctx.textBaseline = textBaseline;

        // Support for multi-line text
        const lines = text.split('\n');
        const lineHeight = textSize * 1.2;
        let startY;
        if (textBaseline === 'top') startY = y;
        else if (textBaseline === 'bottom') startY = y - (lines.length - 1) * lineHeight;
        else startY = y - ((lines.length - 1) * lineHeight) / 2;

        lines.forEach((line, index) => {
            const currentY = startY + index * lineHeight;
            if (textOutlineWidth > 0) ctx.strokeText(line, x, currentY);
            ctx.fillText(line, x, currentY);
        });
    }

    return canvas;
}