Xiaomi Redmi Mi Image Tool

function processImage(originalImg, deviceName = "REDMI NOTE 12", cameraInfo = "AI QUAD CAMERA", textColor = "#FFFFFF") {
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    
    // Set canvas dimensions to match the original image
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

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

    // Calculate dynamic scaling based on the image size
    const minDim = Math.min(width, height);
    const margin = minDim * 0.04;
    const fontSizeLarge = Math.max(minDim * 0.022, 14);
    const fontSizeSmall = Math.max(fontSizeLarge * 0.45, 8);

    const bottomY = height - margin;

    // Apply a drop shadow to ensure the watermark is readable on light areas
    ctx.shadowColor = 'rgba(0, 0, 0, 0.6)';
    ctx.shadowBlur = Math.max(minDim * 0.003, 2);
    ctx.shadowOffsetX = 1;
    ctx.shadowOffsetY = 1;

    // Layout configuration
    const iconRadius = fontSizeLarge * 0.65;
    const iconX = margin + iconRadius * 2;
    const iconY = bottomY - fontSizeLarge * 0.5;

    ctx.strokeStyle = textColor;
    ctx.fillStyle = textColor;
    ctx.lineWidth = Math.max(iconRadius * 0.15, 1);
    ctx.lineJoin = "round";

    // --- Draw Stylized Camera Icon ---
    // Outer camera housing
    const rectW = iconRadius * 4;
    const rectH = iconRadius * 2.2;
    const rectX = iconX - rectW / 2;
    const rectY = iconY - rectH / 2;

    ctx.beginPath();
    if (ctx.roundRect) {
        ctx.roundRect(rectX, rectY, rectW, rectH, iconRadius * 0.5);
    } else {
        // Fallback for older browsers
        ctx.rect(rectX, rectY, rectW, rectH);
    }
    ctx.stroke();

    // Lenses and flash
    const dist = iconRadius * 1.5;
    
    // Left Lens
    ctx.beginPath();
    ctx.arc(iconX - dist / 2, iconY, iconRadius * 0.4, 0, Math.PI * 2);
    ctx.fill();
    
    // Right Lens
    ctx.beginPath();
    ctx.arc(iconX + dist / 2, iconY, iconRadius * 0.4, 0, Math.PI * 2);
    ctx.fill();

    // Flash dot
    ctx.beginPath();
    ctx.arc(iconX + dist / 2 + iconRadius * 0.9, iconY, iconRadius * 0.15, 0, Math.PI * 2);
    ctx.fill();

    // --- Draw Watermark Text ---
    const textX = iconX + rectW / 2 + iconRadius * 1.5;
    ctx.textAlign = "left";
    ctx.textBaseline = "middle"; // Allows easy vertical alignment centering

    // Font stack using typical clean system UI fonts similar to standard MIUI font
    const textFontDef = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif';

    // Device Name (Top line, large bold)
    ctx.font = `bold ${fontSizeLarge}px ${textFontDef}`;
    ctx.fillText(`SHOT ON ${deviceName}`.toUpperCase(), textX, iconY - fontSizeLarge * 0.35);

    // Camera Info (Bottom line, smaller spacing)
    ctx.font = `500 ${fontSizeSmall}px ${textFontDef}`;
    ctx.fillText(cameraInfo.toUpperCase(), textX, iconY + fontSizeLarge * 0.35);

    return canvas;
}