Image Entomology Reference For Wandering Termites

function processImage(originalImg, commonName = "Бродячие термиты", scientificName = "Reticulitermes lucifugus", referenceNumber = "Cat. No. 734", scaleLength = 5, scaleUnit = "mm") {
    // 1. Define layout and dimensions
    const padding = {
        top: 70,
        bottom: 80,
        left: 40,
        right: 40
    };
    const canvasWidth = originalImg.width + padding.left + padding.right;
    const canvasHeight = originalImg.height + padding.top + padding.bottom;
    const fontFamily = 'Georgia, serif';

    // 2. Create canvas and get 2D context
    const canvas = document.createElement('canvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    const ctx = canvas.getContext('2d');

    // 3. Draw the background, creating a 'specimen card' look
    ctx.fillStyle = '#fdfdf6'; // Light parchment/off-white color
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
    ctx.strokeStyle = '#cccccc'; // Light gray border
    ctx.lineWidth = 1;
    ctx.strokeRect(0, 0, canvasWidth, canvasHeight);

    // 4. Draw the original image onto the canvas
    const imgX = padding.left;
    const imgY = padding.top;
    ctx.drawImage(originalImg, imgX, imgY, originalImg.width, originalImg.height);
    
    // Add a simple border around the image to frame it
    ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
    ctx.lineWidth = 1;
    ctx.strokeRect(imgX, imgY, originalImg.width, originalImg.height);

    // 5. Add text labels
    ctx.fillStyle = '#222222'; // Dark color for text for readability
    
    // Title (Common Name)
    ctx.font = `bold 26px ${fontFamily}`;
    ctx.textAlign = 'center';
    ctx.fillText(commonName, canvasWidth / 2, 45);

    // Scientific Name (italicized)
    ctx.font = `italic 20px ${fontFamily}`;
    ctx.fillText(scientificName, canvasWidth / 2, canvasHeight - 50);

    // Reference Number (bottom-left)
    ctx.font = `14px ${fontFamily}`;
    ctx.textAlign = 'left';
    ctx.fillText(referenceNumber, padding.left, canvasHeight - 20);

    // 6. Draw a scale bar (bottom-right)
    const scaleBarWidthPx = 100; // The visual width of the scale bar in pixels
    const scaleBarHeight = 6;
    const scaleBarX = canvasWidth - padding.right - scaleBarWidthPx;
    const scaleBarY = canvasHeight - 20 - scaleBarHeight;
    
    // Draw the bar with alternating segments for a classic look
    const numSegments = 5;
    const segmentWidth = scaleBarWidthPx / numSegments;
    for (let i = 0; i < numSegments; i++) {
        ctx.fillStyle = (i % 2 === 0) ? '#222222' : '#fdfdf6';
        ctx.fillRect(scaleBarX + i * segmentWidth, scaleBarY, segmentWidth, scaleBarHeight);
    }
    
    // Outline the whole scale bar
    ctx.strokeStyle = '#222222';
    ctx.lineWidth = 1;
    ctx.strokeRect(scaleBarX, scaleBarY, scaleBarWidthPx, scaleBarHeight);

    // Label for the scale bar
    ctx.fillStyle = '#222222';
    ctx.textAlign = 'center';
    ctx.font = `14px ${fontFamily}`;
    ctx.fillText(`${scaleLength} ${scaleUnit}`, scaleBarX + scaleBarWidthPx / 2, scaleBarY - 8);

    // 7. Return the final canvas element
    return canvas;
}