Image To Dual Search Topic Generator Tool

function processImage(originalImg, searchTopic1 = "Языки мира", searchTopic2 = "ДВД Диск", bgColor = "#1e1e24", textColor = "#ffffff", searchBoxColor = "#2b2b36") {
    // Create canvas
    const canvas = document.createElement('canvas');
    canvas.width = 800;
    canvas.height = 800;
    const ctx = canvas.getContext('2d');

    // 1. Draw Background
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Draw Decorative Titles based on the description
    ctx.fillStyle = textColor;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    
    // Main Title
    ctx.font = "bold 32px Arial, sans-serif";
    ctx.fillText("Dual Search Topic Generator 🎬", canvas.width / 2, 50);

    // Subtitle / Emojis
    ctx.font = "20px Arial, sans-serif";
    ctx.fillStyle = "#aaaaaa";
    ctx.fillText("🌍 Языки мира • ДВД Диск 🌍", canvas.width / 2, 90);

    // 3. Draw DVD Disk Element (with the original image acting as the disc art)
    const discCenterX = 400;
    const discCenterY = 380;
    const discRadius = 220;

    // Save context for clipping the image into a circle
    ctx.save();
    ctx.beginPath();
    ctx.arc(discCenterX, discCenterY, discRadius, 0, Math.PI * 2);
    ctx.closePath();
    ctx.clip();

    // Calculate dimensions to object-fit: cover the image inside the disc
    const imgRatio = originalImg.width / originalImg.height;
    let drawW = discRadius * 2;
    let drawH = discRadius * 2;
    
    if (imgRatio > 1) { // Landscape
        drawW = drawH * imgRatio;
    } else { // Portrait or Square
        drawH = drawW / imgRatio;
    }
    
    ctx.drawImage(
        originalImg,
        discCenterX - drawW / 2,
        discCenterY - drawH / 2,
        drawW,
        drawH
    );
    
    // Add a glossy reflective gradient to simulate a shiny DVD surface
    const glossGradient = ctx.createLinearGradient(
        discCenterX - discRadius,
        discCenterY - discRadius,
        discCenterX + discRadius,
        discCenterY + discRadius
    );
    glossGradient.addColorStop(0, "rgba(255,255,255,0.4)");
    glossGradient.addColorStop(0.3, "rgba(255,255,255,0)");
    glossGradient.addColorStop(0.7, "rgba(255,255,255,0)");
    glossGradient.addColorStop(1, "rgba(255,255,255,0.3)");
    
    ctx.fillStyle = glossGradient;
    ctx.fillRect(discCenterX - discRadius, discCenterY - discRadius, discRadius * 2, discRadius * 2);

    // Restore context to remove clipping
    ctx.restore();

    // Draw the transparent/hollow center hole of the DVD
    ctx.beginPath();
    ctx.arc(discCenterX, discCenterY, 35, 0, Math.PI * 2);
    ctx.fillStyle = bgColor;
    ctx.fill();

    // Draw metallic rings for realistic DVD look
    ctx.lineWidth = 2;
    ctx.strokeStyle = "rgba(255,255,255,0.2)";
    ctx.beginPath(); ctx.arc(discCenterX, discCenterY, discRadius, 0, Math.PI * 2); ctx.stroke();     // Outer border
    ctx.beginPath(); ctx.arc(discCenterX, discCenterY, discRadius - 7, 0, Math.PI * 2); ctx.stroke(); // Inner outer ring 
    ctx.beginPath(); ctx.arc(discCenterX, discCenterY, 35, 0, Math.PI * 2); ctx.stroke();             // Inner hole border
    ctx.beginPath(); ctx.arc(discCenterX, discCenterY, 43, 0, Math.PI * 2); ctx.stroke();             // Inner ring

    // 4. Helper function to draw rounded search boxes
    function drawRoundedRect(x, y, w, h, radius, color) {
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + w - radius, y);
        ctx.quadraticCurveTo(x + w, y, x + w, y + radius);
        ctx.lineTo(x + w, y + h - radius);
        ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
        ctx.lineTo(x + radius, y + h);
        ctx.quadraticCurveTo(x, y + h, x, y + h - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.closePath();
        ctx.fill();
    }

    // 5. Draw Dual Search Topic Bars
    const searchY = 660;
    const boxWidth = 320;
    const boxHeight = 60;
    const cornerRadius = 30;
    
    const box1X = 60;
    const box2X = 420;

    // Background of search bars
    drawRoundedRect(box1X, searchY, boxWidth, boxHeight, cornerRadius, searchBoxColor);
    drawRoundedRect(box2X, searchY, boxWidth, boxHeight, cornerRadius, searchBoxColor);

    // Setup Text and icons for search bars
    ctx.textAlign = "left";
    ctx.textBaseline = "middle";
    ctx.font = "18px Arial, sans-serif";
    ctx.fillStyle = textColor;
    
    // Fit Search Topics text into bars gracefully
    ctx.fillText(searchTopic1, box1X + 50, searchY + boxHeight / 2, boxWidth - 70);
    ctx.fillText(searchTopic2, box2X + 50, searchY + boxHeight / 2, boxWidth - 70);

    // Magnifying glass icon drawing function (Search UI Element)
    function drawSearchIcon(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 7, 0, Math.PI * 2);
        ctx.strokeStyle = "#aaaaaa";
        ctx.lineWidth = 2;
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(x + 5, y + 5);
        ctx.lineTo(x + 12, y + 12);
        ctx.stroke();
    }

    // Draw search icons inside their respective boxes
    drawSearchIcon(box1X + 25, searchY + boxHeight / 2 - 2);
    drawSearchIcon(box2X + 25, searchY + boxHeight / 2 - 2);

    return canvas;
}