Image Search By Topic Studio Company And Year Tool

function processImage(originalImg, topic = 'Technology', studio = 'Global', company = 'Internet', year = '2024') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Proportionally scale the banner height based on the image size
    const bannerHeight = Math.max(60, Math.floor(originalImg.width * 0.12));
    canvas.width = originalImg.width;
    canvas.height = originalImg.height + bannerHeight;
    
    // Draw the original image onto the top part of the canvas
    ctx.drawImage(originalImg, 0, 0);
    
    // Draw the search banner background at the bottom
    ctx.fillStyle = '#f1f3f4';
    ctx.fillRect(0, originalImg.height, canvas.width, bannerHeight);
    
    // Search box dimensions and positioning
    const padding = bannerHeight * 0.15;
    const boxX = padding;
    const boxY = originalImg.height + padding; 
    const boxWidth = canvas.width - padding * 2;
    const boxHeight = bannerHeight - padding * 2;
    const cornerRadius = boxHeight / 2;
    
    // Draw search box shadow for a realistic look
    ctx.shadowColor = 'rgba(0, 0, 0, 0.1)';
    ctx.shadowBlur = 8;
    ctx.shadowOffsetY = 2;
    
    // Draw the search box (rounded rectangle path fallback for older browsers compatibility)
    ctx.fillStyle = '#ffffff';
    ctx.strokeStyle = '#dfe1e5';
    ctx.lineWidth = Math.max(1, boxHeight * 0.02);

    ctx.beginPath();
    ctx.moveTo(boxX + cornerRadius, boxY);
    ctx.lineTo(boxX + boxWidth - cornerRadius, boxY);
    ctx.quadraticCurveTo(boxX + boxWidth, boxY, boxX + boxWidth, boxY + cornerRadius);
    ctx.lineTo(boxX + boxWidth, boxY + boxHeight - cornerRadius);
    ctx.quadraticCurveTo(boxX + boxWidth, boxY + boxHeight, boxX + boxWidth - cornerRadius, boxY + boxHeight);
    ctx.lineTo(boxX + cornerRadius, boxY + boxHeight);
    ctx.quadraticCurveTo(boxX, boxY + boxHeight, boxX, boxY + boxHeight - cornerRadius);
    ctx.lineTo(boxX, boxY + cornerRadius);
    ctx.quadraticCurveTo(boxX, boxY, boxX + cornerRadius, boxY);
    ctx.closePath();
    ctx.fill();
    
    // Reset shadow to draw crisp stroke and text
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetY = 0;
    ctx.stroke();

    // Collect variables and prepare the display text layout
    const searchTerms = [topic, studio, company, year].filter(Boolean).join(' ');
    const searchText = `Search = ${searchTerms}`;
    
    const fontSize = Math.max(12, Math.floor(boxHeight * 0.4));
    ctx.font = `${fontSize}px Arial, sans-serif`;
    ctx.textBaseline = 'middle';
    
    const icon = '🔍';
    const iconPadding = boxWidth * 0.015;
    const startX = boxX + cornerRadius * 0.6;
    const textY = boxY + boxHeight / 2 + 1; // minor vertical tweak for standard baseline
    
    // Render magnifying glass icon
    ctx.fillStyle = '#5f6368';
    ctx.fillText(icon, startX, textY);
    const iconWidth = ctx.measureText(icon).width;
    
    // Smart truncation for text overflow in case the search string is too long for the image size
    let textToDraw = searchText;
    const maxTextWidth = boxWidth - (startX - boxX) - iconWidth - iconPadding - cornerRadius;
    
    ctx.fillStyle = '#202124';
    if (ctx.measureText(textToDraw).width > maxTextWidth) {
        while (ctx.measureText(textToDraw + '...').width > maxTextWidth && textToDraw.length > 0) {
            textToDraw = textToDraw.slice(0, -1);
        }
        textToDraw += '...';
    }
    
    // Render final search text
    ctx.fillText(textToDraw, startX + iconWidth + iconPadding, textY);
    
    return canvas;
}