Image Related To The Piano Case

/**
 * Applies a "Piano Case" themed filter to an image, giving it a vintage,
 * mysterious, film-noir look. This includes sepia toning, film grain,
 * a vignette effect, and thematic text.
 *
 * @param {Image} originalImg The original Javascript Image object.
 * @param {number} vignetteIntensity The darkness of the vignette effect from 0 (none) to 1 (black). Default is 0.7.
 * @param {number} sepiaIntensity The strength of the sepia filter from 0 (original color) to 1 (full sepia). Default is 1.0.
 * @param {number} grainAmount The amount of film grain noise to add from 0 (none) to 1 (heavy). Default is 0.15.
 * @param {string} text The text to display on the image. Default is "Дело о Пианино".
 * @param {string} fontName The Google Font name to use for the text. Default is 'Special Elite'.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the processed canvas element.
 */
async function processImage(originalImg, vignetteIntensity = 0.7, sepiaIntensity = 1.0, grainAmount = 0.15, text = "Дело о Пианино", fontName = 'Special Elite') {

    // Helper function to ensure color channels are within the 0-255 range
    const clamp = (value) => Math.max(0, Math.min(255, value));

    // Dynamically load the specified Google Font if it hasn't been loaded already.
    // This makes the function self-contained.
    const fontId = `google-font-${fontName.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=${fontName.replace(/\s+/g, '+')}&display=swap`;
        document.head.appendChild(link);
        // We must wait for the font to be ready before we can use it on the canvas
        await document.fonts.load(`1em "${fontName}"`);
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

    // Draw the original image to the canvas to get its pixel data
    ctx.drawImage(originalImg, 0, 0, w, h);

    const imageData = ctx.getImageData(0, 0, w, h);
    const data = imageData.data;

    // Apply Sepia and Grain filters by iterating through each pixel
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // Classic sepia calculation
        const sr = (r * 0.393) + (g * 0.769) + (b * 0.189);
        const sg = (r * 0.349) + (g * 0.686) + (b * 0.168);
        const sb = (r * 0.272) + (g * 0.534) + (b * 0.131);

        // Linearly interpolate between original color and sepia based on intensity
        const finalR = (1 - sepiaIntensity) * r + sepiaIntensity * sr;
        const finalG = (1 - sepiaIntensity) * g + sepiaIntensity * sg;
        const finalB = (1 - sepiaIntensity) * b + sepiaIntensity * sb;

        // Add pseudo-random noise for a film grain effect
        const grain = (Math.random() - 0.5) * 255 * grainAmount;

        data[i] = clamp(finalR + grain);
        data[i + 1] = clamp(finalG + grain);
        data[i + 2] = clamp(finalB + grain);
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // Apply Vignette effect by drawing a radial gradient over the image
    if (vignetteIntensity > 0) {
        const centerX = w / 2;
        const centerY = h / 2;
        const outerRadius = Math.hypot(centerX, centerY);
        const innerRadius = outerRadius * 0.4; // The central clear area

        const gradient = ctx.createRadialGradient(centerX, centerY, innerRadius, centerX, centerY, outerRadius);
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, `rgba(0,0,0,${Math.max(0, Math.min(1, vignetteIntensity))})`);

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
    }

    // Add the thematic text overlay
    if (text && text.trim() !== '') {
        // Calculate a responsive font size
        const fontSize = Math.max(16, Math.min(w, h) / 30);
        ctx.font = `${fontSize}px "${fontName}", cursive`;
        ctx.fillStyle = 'rgba(245, 245, 220, 0.85)'; // An off-white, beige color
        ctx.textAlign = 'right';
        ctx.textBaseline = 'bottom';

        const padding = fontSize;
        ctx.fillText(text, w - padding, h - padding);
    }

    return canvas;
}