Image Video Editing Utility For Powerdirector

/**
 * Applies various video-editor-style effects to an image, such as color grading,
 * cinematic aspect ratios, vignettes, and text overlays. This function emulates
 * common image manipulation tasks found in video editing software.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} [brightness='100'] The brightness of the image as a percentage (e.g., '100' is normal, '150' is brighter).
 * @param {string} [contrast='100'] The contrast of the image as a percentage (e.g., '100' is normal).
 * @param {string} [saturate='100'] The color saturation of the image as a percentage (e.g., '100' is normal, '0' is grayscale).
 * @param {string} [grayscale='0'] The amount of grayscale to apply as a percentage (e.g., '100' is fully grayscale).
 * @param {string} [sepia='0'] The amount of sepia to apply as a percentage (e.g., '100' is full sepia).
 * @param {string} [hueRotate='0'] The hue rotation in degrees (e.g., '90' rotates colors by 90 degrees).
 * @param {number} [vignetteStrength=0.0] The strength of the vignette effect from 0 (none) to 1 (strong).
 * @param {string} [vignetteColor='black'] The color of the vignette effect.
 * @param {string} [aspect=''] The target aspect ratio (e.g., '16:9', '4:3'). Blank for original. Adds letter/pillarboxing.
 * @param {string} [text=''] The text to overlay on the image.
 * @param {number} [textSize=48] The font size of the text in pixels.
 * @param {string} [textFont='Impact'] The font family for the text. Tries to load from Google Fonts if not web-safe.
 * @param {string} [textColor='white'] The color of the text.
 * @param {string} [textStrokeColor='black'] The color of the text outline.
 * @param {number} [textStrokeWidth=2] The width of the text outline in pixels.
 * @param {number} [textX=50] The horizontal position of the text as a percentage of the image width.
 * @param {number} [textY=90] The vertical position of the text as a percentage of the image height.
 * @param {string} [textAlign='center'] The text alignment ('left', 'right', 'center').
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the processed canvas element.
 */
async function processImage(
    originalImg,
    brightness = '100',
    contrast = '100',
    saturate = '100',
    grayscale = '0',
    sepia = '0',
    hueRotate = '0',
    vignetteStrength = 0.0,
    vignetteColor = 'black',
    aspect = '',
    text = '',
    textSize = 48,
    textFont = 'Impact',
    textColor = 'white',
    textStrokeColor = 'black',
    textStrokeWidth = 2,
    textX = 50,
    textY = 90,
    textAlign = 'center'
) {
    // Helper to dynamically load a font if it's not a standard web-safe font.
    const loadFont = async (fontFamily, size) => {
        const webSafeFonts = [
            'arial', 'verdana', 'helvetica', 'tahoma', 'trebuchet ms', 'times new roman',
            'georgia', 'garamond', 'courier new', 'brush script mt', 'impact', 'sans-serif', 'serif'
        ];
        if (webSafeFonts.some(font => fontFamily.toLowerCase().includes(font))) {
            return; // It's likely a web-safe font, no need to load.
        }

        const fontId = `font-link-${fontFamily.replace(/\s/g, '-')}`;
        if (!document.getElementById(fontId)) {
            const link = document.createElement('link');
            link.id = fontId;
            link.rel = 'stylesheet';
            link.href = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/\s/g, '+')}&display=swap`;
            document.head.appendChild(link);
        }

        try {
            await document.fonts.load(`${size}px ${fontFamily}`);
        } catch (e) {
            console.warn(`Could not load Google Font: "${fontFamily}". It may not exist or the network failed.`);
        }
    };

    if (text && textFont) {
        await loadFont(textFont, textSize);
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    let canvasWidth = originalImg.naturalWidth;
    let canvasHeight = originalImg.naturalHeight;
    let drawX = 0;
    let drawY = 0;
    let drawWidth = canvasWidth;
    let drawHeight = canvasHeight;

    // Adjust canvas size for aspect ratio (letterboxing/pillarboxing)
    if (aspect && aspect.includes(':')) {
        const [w, h] = aspect.split(':').map(Number);
        if (w > 0 && h > 0) {
            const targetRatio = w / h;
            const imageRatio = originalImg.naturalWidth / originalImg.naturalHeight;

            if (imageRatio > targetRatio) { // Image is wider, needs letterboxing (top/bottom bars)
                canvasWidth = originalImg.naturalWidth;
                canvasHeight = canvasWidth / targetRatio;
                drawY = (canvasHeight - originalImg.naturalHeight) / 2;
            } else { // Image is taller or same, needs pillarboxing (left/right bars)
                canvasHeight = originalImg.naturalHeight;
                canvasWidth = canvasHeight * targetRatio;
                drawX = (canvasWidth - originalImg.naturalWidth) / 2;
            }
        }
    }

    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    // Fill background if aspect ratio adjustment was made
    if (drawX > 0 || drawY > 0) {
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
    }

    // Apply CSS filters for color grading
    ctx.filter = [
        `brightness(${parseFloat(brightness)}%)`,
        `contrast(${parseFloat(contrast)}%)`,
        `saturate(${parseFloat(saturate)}%)`,
        `grayscale(${parseFloat(grayscale)}%)`,
        `sepia(${parseFloat(sepia)}%)`,
        `hue-rotate(${parseInt(hueRotate, 10)}deg)`
    ].join(' ');

    ctx.drawImage(originalImg, drawX, drawY, drawWidth, drawHeight);

    // Reset filter for subsequent drawings
    ctx.filter = 'none';

    // Apply vignette effect
    if (vignetteStrength > 0) {
        const centerX = canvasWidth / 2;
        const centerY = canvasHeight / 2;
        const outerRadius = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2));
        const gradient = ctx.createRadialGradient(centerX, centerY, outerRadius * (1 - Math.min(vignetteStrength, 1)), centerX, centerY, outerRadius);
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, vignetteColor);

        ctx.fillStyle = gradient;
        ctx.globalCompositeOperation = 'source-over';
        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
    }

    // Apply text overlay
    if (text) {
        const x = canvasWidth * (textX / 100);
        const y = canvasHeight * (textY / 100);

        ctx.font = `${textSize}px "${textFont}"`;
        ctx.textAlign = textAlign;
        ctx.textBaseline = 'middle';

        // Add stroke for better readability, common in video titles
        if (textStrokeWidth > 0 && textStrokeColor) {
            ctx.strokeStyle = textStrokeColor;
            ctx.lineWidth = textStrokeWidth * 2; // Line width is centered on the path, so double it for an outer effect
            ctx.strokeText(text, x, y);
        }

        ctx.fillStyle = textColor;
        ctx.fillText(text, x, y);
    }

    return canvas;
}