Image Contact Adding Utility

/**
 * Adds a "new contact" UI overlay to an image.
 * This function draws the original image on a canvas and then adds a semi-transparent
 * overlay at the bottom containing a "plus" icon and customizable text,
 * mimicking a UI element for adding a person tag in a photo application.
 *
 * @param {HTMLImageElement} originalImg The original image object. Assumed to be loaded.
 * @param {string} name The main title text. Defaults to "Люди" (People).
 * @param {string} actionText The sub-heading or action text. Defaults to "Добавить новый контакт" (Add new contact).
 * @param {string} textColor The CSS color for the text.
 * @param {string} overlayColor The CSS color (including alpha for transparency) for the overlay bar.
 * @param {string} iconColor The CSS color for the "plus" icon.
 * @param {number} baseFontSizeName The base font size in pixels for the main title text. This will be scaled based on image size.
 * @param {number} baseFontSizeAction The base font size in pixels for the action text. This will be scaled based on image size.
 * @param {number} iconStrokeWidth The base stroke width for the icon. This will also be scaled.
 * @returns {HTMLCanvasElement} A new canvas element with the image and overlay.
 */
function processImage(
    originalImg,
    name = "Люди",
    actionText = "Добавить новый контакт",
    textColor = "#FFFFFF",
    overlayColor = "rgba(0, 0, 0, 0.6)",
    iconColor = "#FFFFFF",
    baseFontSizeName = 24,
    baseFontSizeAction = 16,
    iconStrokeWidth = 2
) {
    // 1. Create a canvas and set its dimensions to match the image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // 2. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // 3. Define and draw the semi-transparent overlay at the bottom
    // The overlay height is responsive, being 15% of the image height, but with a minimum of 80px
    const overlayHeight = Math.max(canvas.height * 0.15, 80);
    const overlayY = canvas.height - overlayHeight;

    ctx.fillStyle = overlayColor;
    ctx.fillRect(0, overlayY, canvas.width, overlayHeight);

    // 4. Calculate responsive sizes for UI elements based on the overlay height
    // We use a scale factor relative to a base overlay height of 100px
    const scale = overlayHeight / 100;
    const padding = 20 * scale;

    // 5. Draw the "Add" icon (a plus sign inside a circle)
    const iconDiameter = overlayHeight - (padding * 2);
    const iconRadius = iconDiameter / 2;
    const iconCenterX = padding + iconRadius;
    const iconCenterY = overlayY + overlayHeight / 2;

    ctx.strokeStyle = iconColor;
    ctx.lineWidth = Math.max(1, iconStrokeWidth * scale); // Ensure line width is at least 1px

    // Draw the circle
    ctx.beginPath();
    ctx.arc(iconCenterX, iconCenterY, iconRadius, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw the plus sign
    const plusLineLength = iconRadius * 1.1;
    ctx.beginPath();
    // Horizontal line
    ctx.moveTo(iconCenterX - plusLineLength / 2, iconCenterY);
    ctx.lineTo(iconCenterX + plusLineLength / 2, iconCenterY);
    // Vertical line
    ctx.moveTo(iconCenterX, iconCenterY - plusLineLength / 2);
    ctx.lineTo(iconCenterX, iconCenterY + plusLineLength / 2);
    ctx.stroke();

    // 6. Draw the text next to the icon
    const textX = iconCenterX + iconRadius + padding;
    const textBlockCenterY = overlayY + overlayHeight / 2;
    const textGap = 2 * scale; // Small vertical gap between the two lines of text

    ctx.fillStyle = textColor;
    ctx.textAlign = 'left';

    // Draw the main title text (e.g., "Люди")
    ctx.font = `bold ${Math.round(baseFontSizeName * scale)}px Arial`;
    ctx.textBaseline = 'bottom';
    ctx.fillText(name, textX, textBlockCenterY - textGap);

    // Draw the action text (e.g., "Добавить новый контакт")
    ctx.font = `${Math.round(baseFontSizeAction * scale)}px Arial`;
    ctx.textBaseline = 'top';
    ctx.fillText(actionText, textX, textBlockCenterY + textGap);

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