Image Editor For Маргарита Мегеровна

/**
 * Applies a personalized filter and watermark to an image, in the style of "Маргарита Мегеровна".
 * This includes a selection of vintage-style filters and a watermark using an elegant Cyrillic script font.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @param {string} [filterType='sepia'] The type of filter to apply. Can be 'sepia', 'grayscale', 'vintage', or 'none'.
 * @param {string} [watermarkText='Маргарита Мегеровна'] The text for the watermark. An empty string will disable it.
 * @param {string} [fontColor='rgba(255, 255, 255, 0.8)'] The color of the watermark text.
 * @param {number} [fontSizePercent=4] The font size as a percentage of the image's shortest side.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the processed canvas element.
 */
async function processImage(originalImg, filterType = 'sepia', watermarkText = 'Маргарита Мегеровна', fontColor = 'rgba(255, 255, 255, 0.8)', fontSizePercent = 4) {
    const fontName = 'Marck Script';

    // Dynamically load the Google Font 'Marck Script' which supports Cyrillic.
    // This is done only once to improve performance on subsequent calls.
    if (!document.fonts.check(`12px "${fontName}"`)) {
        try {
            const fontUrl = 'https://fonts.gstatic.com/s/marckscript/v17/nwpTtK2oNgBA3Or78gapdwuyyCg_328.woff2';
            const font = new FontFace(fontName, `url(${fontUrl})`, {
                style: 'normal',
                weight: '400',
            });
            // Wait for the font to be loaded and add it to the document's font set.
            await font.load();
            document.fonts.add(font);
        } catch (e) {
            console.error(`Could not load the font "${fontName}". A fallback font will be used.`, e);
        }
    }

    // Create a canvas and set its dimensions to match the original image.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Apply the selected visual filter to the canvas context.
    switch (filterType) {
        case 'sepia':
            ctx.filter = 'sepia(60%) brightness(1.05) contrast(1.1)';
            break;
        case 'grayscale':
            ctx.filter = 'grayscale(100%) brightness(1.05)';
            break;
        case 'vintage':
            ctx.filter = 'sepia(50%) contrast(120%) saturate(120%) brightness(90%) hue-rotate(-15deg)';
            break;
        case 'none':
        default:
            ctx.filter = 'none';
            break;
    }

    // Draw the image onto the canvas with the filter applied.
    ctx.drawImage(originalImg, 0, 0);

    // Reset the filter so it doesn't affect the watermark text.
    ctx.filter = 'none';

    // Add the watermark if text is provided.
    if (watermarkText && watermarkText.trim() !== '') {
        // Calculate a responsive font size based on the image's smallest dimension.
        const baseSize = Math.min(canvas.width, canvas.height);
        const finalFontSize = Math.max(12, Math.round(baseSize * (fontSizePercent / 100))); // Minimum size of 12px.

        // Set font style, providing a generic fallback.
        ctx.font = `400 ${finalFontSize}px "${fontName}", cursive`;
        ctx.fillStyle = fontColor;
        ctx.textAlign = 'right';
        ctx.textBaseline = 'bottom';

        // Add a subtle shadow for better text readability against various backgrounds.
        ctx.shadowColor = 'rgba(0, 0, 0, 0.6)';
        ctx.shadowBlur = 5;
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;

        // Position the text in the bottom-right corner with a small padding.
        const padding = finalFontSize * 0.5;
        ctx.fillText(watermarkText, canvas.width - padding, canvas.height - padding);
    }

    // Return the final canvas element.
    return canvas;
}