Movie Image To Google Lens Converter

function processImage(originalImg, boxScale = "0.75", lineThickness = "6") {
    const scale = parseFloat(boxScale) || 0.75;
    const baseThickness = parseInt(lineThickness) || 6;
    
    // Setup canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const w = canvas.width;
    const h = canvas.height;
    const minDim = Math.min(w, h);
    
    // Draw original image
    ctx.drawImage(originalImg, 0, 0, w, h);
    
    // Draw context-dimming overlay
    ctx.fillStyle = 'rgba(0, 0, 0, 0.45)';
    ctx.fillRect(0, 0, w, h);
    
    // Define Google Lens search box dimensions
    const boxW = w * scale;
    const boxH = h * scale;
    const startX = (w - boxW) / 2;
    const startY = (h - boxH) / 2;
    const cornerLen = Math.min(boxW, boxH) * 0.15;
    const radius = cornerLen * 0.4;
    const thickness = baseThickness * (minDim / 800); // Scale line thickness based on image size
    
    // Helper function for drawing rounded rectangles safely
    const applyRoundRect = (context, x, y, width, height, rad) => {
        if (context.roundRect) {
            context.roundRect(x, y, width, height, rad);
        } else {
            context.moveTo(x + rad, y);
            context.lineTo(x + width - rad, y);
            context.quadraticCurveTo(x + width, y, x + width, y + rad);
            context.lineTo(x + width, y + height - rad);
            context.quadraticCurveTo(x + width, y + height, x + width - rad, y + height);
            context.lineTo(x + rad, y + height);
            context.quadraticCurveTo(x, y + height, x, y + height - rad);
            context.lineTo(x, y + rad);
            context.quadraticCurveTo(x, y, x + rad, y);
        }
    };
    
    // Cutout the focus area to restore original brightness
    ctx.save();
    ctx.beginPath();
    applyRoundRect(ctx, startX, startY, boxW, boxH, radius);
    ctx.clip();
    ctx.drawImage(originalImg, 0, 0, w, h);
    ctx.restore();
    
    // Viewfinder bracket corners
    ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
    ctx.shadowBlur = 10;
    ctx.strokeStyle = 'white';
    ctx.lineWidth = thickness;
    ctx.lineCap = 'round';
    
    const drawCorner = (x, y, dirX, dirY) => {
        ctx.beginPath();
        ctx.moveTo(x, y + dirY * cornerLen);
        ctx.lineTo(x, y + dirY * radius);
        ctx.quadraticCurveTo(x, y, x + dirX * radius, y);
        ctx.lineTo(x + dirX * cornerLen, y);
        ctx.stroke();
    };

    drawCorner(startX, startY, 1, 1); // Top-Left
    drawCorner(startX + boxW, startY, -1, 1); // Top-Right
    drawCorner(startX, startY + boxH, 1, -1); // Bottom-Left
    drawCorner(startX + boxW, startY + boxH, -1, -1); // Bottom-Right
    
    // Draw scanning laser line
    const grad = ctx.createLinearGradient(startX, 0, startX + boxW, 0);
    grad.addColorStop(0, 'rgba(255,255,255,0)');
    grad.addColorStop(0.5, 'rgba(255,255,255,0.8)');
    grad.addColorStop(1, 'rgba(255,255,255,0)');
    ctx.fillStyle = grad;
    ctx.shadowColor = 'transparent';
    ctx.fillRect(startX, startY + boxH * 0.45, boxW, thickness / 2);
    
    // Google Lens Search Pill UI
    const pillH = minDim * 0.08;
    const pillW = pillH * 4;
    const pillX = (w - pillW) / 2;
    const pillY = startY + boxH + (h - (startY + boxH) - pillH) / 2;
    
    // Pill background
    ctx.shadowColor = 'rgba(0, 0, 0, 0.25)';
    ctx.shadowBlur = 12;
    ctx.shadowOffsetY = 4;
    ctx.fillStyle = 'white';
    ctx.beginPath();
    applyRoundRect(ctx, pillX, pillY, pillW, pillH, pillH / 2);
    ctx.fill();
    
    // Google Colors
    const gBlue = '#4285F4';
    const gRed = '#EA4335';
    const gYellow = '#FBBC05';
    const gGreen = '#34A853';
    
    // Draw Google Lens Icon Approximation
    ctx.shadowColor = 'transparent';
    const iconSize = pillH * 0.45;
    const iconX = pillX + pillW * 0.18 + iconSize / 2;
    const iconY = pillY + pillH / 2;
    const rL = iconSize / 2; // radius/boundary for lines
    
    ctx.lineWidth = pillH * 0.08;
    ctx.lineJoin = 'round';
    
    // Left & Bottom-Left (Blue)
    ctx.strokeStyle = gBlue;
    ctx.beginPath();
    ctx.moveTo(iconX - rL, iconY + rL * 0.5);
    ctx.lineTo(iconX - rL, iconY + rL);
    ctx.lineTo(iconX - rL * 0.4, iconY + rL);
    ctx.stroke();
    
    // Bottom-Right (Green)
    ctx.strokeStyle = gGreen;
    ctx.beginPath();
    ctx.moveTo(iconX + rL, iconY + rL * 0.5);
    ctx.lineTo(iconX + rL, iconY + rL);
    ctx.lineTo(iconX + rL * 0.4, iconY + rL);
    ctx.stroke();
    
    // Top & Top-Left (Red)
    ctx.strokeStyle = gRed;
    ctx.beginPath();
    ctx.moveTo(iconX - rL, iconY - rL * 0.5);
    ctx.lineTo(iconX - rL, iconY - rL);
    ctx.lineTo(iconX + rL * 0.4, iconY - rL);
    ctx.stroke();
    
    // Center Dot (Blue)
    ctx.fillStyle = gBlue;
    ctx.beginPath();
    ctx.arc(iconX, iconY, ctx.lineWidth * 0.9, 0, Math.PI * 2);
    ctx.fill();
    
    // Top Right Dot (Yellow)
    ctx.fillStyle = gYellow;
    ctx.beginPath();
    ctx.arc(iconX + rL, iconY - rL, ctx.lineWidth * 0.8, 0, Math.PI * 2);
    ctx.fill();

    // Text: "Search"
    const fontSize = pillH * 0.38;
    ctx.font = `500 ${fontSize}px "Google Sans", "Segoe UI", Roboto, Arial, sans-serif`;
    ctx.fillStyle = '#3c4043';
    ctx.textBaseline = 'middle';
    ctx.fillText("Search", iconX + iconSize * 0.8, iconY + (pillH * 0.02));
    
    return canvas;
}