Image Text Insertion From Photo Tool

/**
 * Inserts text onto an image with various formatting options.
 * Note: For custom fonts (e.g., from Google Fonts), ensure they are loaded in the document
 * before calling this function, as it does not dynamically load fonts.
 *
 * @param {HTMLImageElement} originalImg The source image object (must be fully loaded).
 * @param {string} [text="Sample Text"] The text to insert. Use '\n' for line breaks.
 * @param {(number|string)} [x=10] The horizontal position of the text. Can be a number (pixels) or a string with a percentage (e.g., "50%").
 * @param {(number|string)} [y=10] The vertical position of the text. Can be a number (pixels) or a string with a percentage (e.g., "50%").
 * @param {number} [fontSize=48] The font size in pixels.
 * @param {string} [fontFamily="Arial"] The font family (e.g., "Arial", "Verdana", "Times New Roman").
 * @param {string} [fontColor="#000000"] The color of the text (e.g., "#FF0000", "blue").
 * @param {string} [textAlign="left"] Horizontal alignment ('left', 'right', 'center', 'start', 'end').
 * @param {string} [textBaseline="top"] Vertical alignment of the text block ('top', 'bottom', 'middle').
 * @param {string} [fontStyle="normal"] Font style ('normal', 'italic', 'oblique').
 * @param {string} [fontWeight="normal"] Font weight ('normal', 'bold', 'bolder', 'lighter', or a number like 400, 700).
 * @param {string} [shadowColor="rgba(0,0,0,0)"] Color of the text shadow. Use a transparent color to disable.
 * @param {number} [shadowBlur=0] Blur radius for the shadow.
 * @param {number} [shadowOffsetX=0] Horizontal offset for the shadow.
 * @param {number} [shadowOffsetY=0] Vertical offset for the shadow.
 * @param {string} [strokeColor="rgba(0,0,0,0)"] Color of the text outline. Use a transparent color to disable.
 * @param {number} [strokeWidth=0] Width of the text outline in pixels.
 * @returns {HTMLCanvasElement} A new canvas element with the image and text drawn on it.
 */
function processImage(
    originalImg,
    text = "Sample Text",
    x = 10,
    y = 10,
    fontSize = 48,
    fontFamily = "Arial",
    fontColor = "#000000",
    textAlign = "left",
    textBaseline = "top",
    fontStyle = "normal",
    fontWeight = "normal",
    shadowColor = "rgba(0,0,0,0)",
    shadowBlur = 0,
    shadowOffsetX = 0,
    shadowOffsetY = 0,
    strokeColor = "rgba(0,0,0,0)",
    strokeWidth = 0
) {
    // 1. Create a canvas and get its 2D rendering context.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set canvas dimensions to match the source image.
    // This assumes originalImg is a fully loaded HTMLImageElement.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // 4. Set text rendering properties from the parameters.
    ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
    ctx.fillStyle = fontColor;
    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;

    // 5. Set shadow properties.
    ctx.shadowColor = shadowColor;
    ctx.shadowBlur = shadowBlur;
    ctx.shadowOffsetX = shadowOffsetX;
    ctx.shadowOffsetY = shadowOffsetY;

    // 6. Set stroke properties.
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;

    // 7. Parse X and Y coordinates, handling both pixels (number) and percentages (string).
    let finalX;
    if (typeof x === 'string' && x.trim().endsWith('%')) {
        const percent = parseFloat(x);
        finalX = (percent / 100) * canvas.width;
    } else {
        finalX = parseFloat(x);
    }

    let finalY;
    if (typeof y === 'string' && y.trim().endsWith('%')) {
        const percent = parseFloat(y);
        finalY = (percent / 100) * canvas.height;
    } else {
        finalY = parseFloat(y);
    }

    // 8. Handle multi-line text and vertical alignment for the entire text block.
    const lines = text.split('\n');
    const lineHeight = fontSize * 1.2; // A pragmatic choice for line height for most fonts.

    // Calculate a vertical offset to centrally align the whole text block for 'middle' and 'bottom' baselines.
    const totalBlockHeight = (lines.length - 1) * lineHeight;
    let yOffset = 0;
    if (textBaseline === 'bottom') {
        yOffset = -totalBlockHeight;
    } else if (textBaseline === 'middle') {
        yOffset = -totalBlockHeight / 2;
    }

    // 9. Draw each line of text.
    lines.forEach((line, index) => {
        const currentY = finalY + yOffset + (index * lineHeight);

        // Draw the stroke if a width is specified.
        if (strokeWidth > 0) {
            ctx.strokeText(line, finalX, currentY);
        }

        // Draw the filled text.
        ctx.fillText(line, finalX, currentY);
    });

    // 10. Return the resulting canvas element.
    return canvas;
}