Image Search By City Word Tool

function processImage(originalImg, searchWord = "Город", fontSize = 16, fontFamily = "sans-serif", backgroundColor = "#ffffff", fontWeight = "bold") {
    // Ensure inputs are of valid types
    let safeWord = String(searchWord).trim();
    if (!safeWord) {
        safeWord = "Город";
    }

    let safeFontSize = Number(fontSize);
    if (isNaN(safeFontSize) || safeFontSize <= 0) {
        safeFontSize = 16;
    }

    const safeBackground = String(backgroundColor);
    const safeFontFamily = String(fontFamily);
    const safeFontWeight = String(fontWeight);

    // Get original dimensions
    const width = originalImg.width;
    const height = originalImg.height;

    // Canvas A: For generating text mask and applying the image
    const canvasA = document.createElement('canvas');
    canvasA.width = width;
    canvasA.height = height;
    const ctxA = canvasA.getContext('2d');

    // Configure text styling
    ctxA.font = `${safeFontWeight} ${safeFontSize}px ${safeFontFamily}`;
    ctxA.fillStyle = 'black'; // The mask color doesn't matter, we use it for structure
    ctxA.textBaseline = 'middle';

    // Prepare text spacing and measurements
    let textToRepeat = safeWord + '  '; // Add some spacing naturally
    let textMetrics = ctxA.measureText(textToRepeat);
    let textWidth = textMetrics.width;

    // Fallback if measurement goes wrong (e.g., custom font issues or invisible characters)
    if (textWidth <= 0) {
        textWidth = 50; 
    }

    // Set tight line height to densely pack the letters like a true typographic mosaic
    const lineHeight = safeFontSize * 1.1;

    // Tile the word across the entire canvas
    let row = 0;
    for (let y = lineHeight / 2; y < height + lineHeight; y += lineHeight) {
        // Offset alternating rows for a better brick-like mosaic placement
        let xOffset = (row % 2 === 0) ? 0 : -(textWidth / 2);
        
        for (let x = xOffset; x < width; x += textWidth) {
            ctxA.fillText(textToRepeat, x, y);
        }
        row++;
    }

    // Magic happens here: The subsequent image drawing will only paint over the existing text pixels.
    ctxA.globalCompositeOperation = 'source-in';
    ctxA.drawImage(originalImg, 0, 0, width, height);

    // Canvas B: The final output with the background layer applied
    const canvasB = document.createElement('canvas');
    canvasB.width = width;
    canvasB.height = height;
    const ctxB = canvasB.getContext('2d');

    // 1. Draw the background
    ctxB.fillStyle = safeBackground;
    ctxB.fillRect(0, 0, width, height);

    // 2. Overlay the generated typographic image masked by the search word
    ctxB.drawImage(canvasA, 0, 0);

    return canvasB;
}