Image Scientific Journal Cover Template Creator

function processImage(originalImg, title = "Journal of Scientific Discovery", subtitle = "Volume XII, Issue 4 - October 2024", author = "Dr. Evelyn Reed & Prof. Marcus Thorne", institution = "Advanced Institute for Research", issn = "ISSN 1234-567X") {

    // Helper function for text wrapping
    const wrapTextHelper = (context, text, x, y, maxWidth, lineHeight) => {
        context.textBaseline = 'top'; // Ensure y is the top of the text line
        let words = text.split(' ');
        let currentLine = "";
        let currentY = y;

        for (let i = 0; i < words.length; i++) {
            let testLine = currentLine + words[i] + " ";
            // Measure without trimming the last space for width calculation,
            // but trim for drawing if that's the final line content.
            let metrics = context.measureText(testLine); 
            
            if (metrics.width > maxWidth && i > 0 && currentLine !== "") {
                // Current line + new word is too long, AND current line wasn't empty.
                // So, draw the current line (without the new word).
                context.fillText(currentLine.trim(), x, currentY);
                // Start a new line with the new word.
                currentLine = words[i] + " ";
                currentY += lineHeight;
            } else {
                // Word fits, or it's the first word on this line (even if it's too long by itself).
                currentLine = testLine;
            }
        }
        // Draw any remaining text in the last line.
        context.fillText(currentLine.trim(), x, currentY);
        // Return the Y coordinate for the top of where the next block of text would start.
        return currentY + lineHeight;
    };

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Standard A4-like aspect ratio, common for print.
    // Approx. 1:1.414. Let's use a common digital size.
    const canvasWidth = 850; // Roughly Letter width in pixels at 96 DPI
    const canvasHeight = 1100; // Roughly Letter height
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    // --- Style Definitions ---
    const brandColor = "#0A2F51"; // A deep, professional blue
    const backgroundColor = "#FFFFFF"; // Clean white background for the page
    const textColorOnBrand = "#FFFFFF"; // White text on the brand color band
    const accentColor = "#D3D3D3"; // Light gray for subtle elements if needed

    // --- Basic Page Background ---
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

    // --- Main Image Placement ---
    // The image will take a significant portion, e.g., top 60-70%.
    const imageAreaHeight = canvasHeight * 0.60;
    const imageDisplayX = 0;
    const imageDisplayY = 0;
    const imageDisplayWidth = canvasWidth;
    const imageDisplayHeight = imageAreaHeight;

    // Calculate cropping/scaling for the cover image (fill and center-crop)
    const imgSourceWidth = originalImg.width;
    const imgSourceHeight = originalImg.height;
    const imgSourceAspectRatio = imgSourceWidth / imgSourceHeight;
    const displayAreaAspectRatio = imageDisplayWidth / imageDisplayHeight;

    let sx = 0, sy = 0, sWidth = imgSourceWidth, sHeight = imgSourceHeight;

    if (imgSourceAspectRatio > displayAreaAspectRatio) {
        // Image is wider than display area: crop sides
        sWidth = imgSourceHeight * displayAreaAspectRatio;
        sx = (imgSourceWidth - sWidth) / 2;
    } else if (imgSourceAspectRatio < displayAreaAspectRatio) {
        // Image is taller than display area: crop top/bottom
        sHeight = imgSourceWidth / displayAreaAspectRatio;
        sy = (imgSourceHeight - sHeight) / 2;
    }
    // If aspect ratios are equal, sx, sy, sWidth, sHeight remain as original image dimensions.

    ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, imageDisplayX, imageDisplayY, imageDisplayWidth, imageDisplayHeight);

    // --- Text Information Band ---
    // Positioned below the main image.
    const textBandY = imageAreaHeight;
    const textBandHeight = canvasHeight - imageAreaHeight;
    ctx.fillStyle = brandColor;
    ctx.fillRect(0, textBandY, canvasWidth, textBandHeight);

    // --- Text Styling and Layout ---
    ctx.fillStyle = textColorOnBrand;
    ctx.textBaseline = 'top'; // All Y coordinates reference the top of the text.
    const bandPadding = 30; // Padding within the text band
    let currentTextY = textBandY + bandPadding; // Initial Y for text content

    // --- ISSN (International Standard Serial Number) ---
    // Typically small, often top-right or bottom-corner.
    // Let's place it top-right of the text band.
    const issnFontSize = 14;
    ctx.font = `normal ${issnFontSize}px 'Arial', sans-serif`;
    ctx.textAlign = "right";
    ctx.fillText(issn, canvasWidth - bandPadding, textBandY + bandPadding);
    ctx.textAlign = "left"; // Reset for other text elements

    // --- Journal Title ---
    const titleFontSize = 42;
    const titleLineHeight = titleFontSize * 1.15; // Line height relative to font size
    ctx.font = `bold ${titleFontSize}px 'Georgia', serif`; // A classic serif for titles
    // Max width for title, allowing for padding.
    currentTextY = wrapTextHelper(ctx, title, bandPadding, currentTextY, canvasWidth - (bandPadding * 2), titleLineHeight);

    // --- Subtitle (Volume, Issue, Date) ---
    currentTextY += 10; // Space between title and subtitle
    const subtitleFontSize = 20;
    const subtitleLineHeight = subtitleFontSize * 1.2;
    ctx.font = `normal ${subtitleFontSize}px 'Arial', sans-serif`;
    // Subtitle might need to be narrower if ISSN is large or other elements are on the side.
    // Given ISSN placement, this width should be fine.
    currentTextY = wrapTextHelper(ctx, subtitle, bandPadding, currentTextY, canvasWidth - (bandPadding * 2), subtitleLineHeight);

    // --- Author(s) ---
    currentTextY += 15; // Space
    const authorFontSize = 18;
    const authorLineHeight = authorFontSize * 1.2;
    ctx.font = `normal ${authorFontSize}px 'Arial', sans-serif`;
    currentTextY = wrapTextHelper(ctx, author, bandPadding, currentTextY, canvasWidth - (bandPadding * 2), authorLineHeight);

    // --- Institution/Affiliation ---
    currentTextY += 8; // Space
    const institutionFontSize = 16;
    const institutionLineHeight = institutionFontSize * 1.2;
    ctx.font = `italic ${institutionFontSize}px 'Arial', sans-serif`;
    currentTextY = wrapTextHelper(ctx, institution, bandPadding, currentTextY, canvasWidth - (bandPadding * 2), institutionLineHeight);

    // Optional: Add a small border line if desired
    // ctx.strokeStyle = accentColor;
    // ctx.lineWidth = 1;
    // ctx.beginPath();
    // ctx.moveTo(0, imageAreaHeight);
    // ctx.lineTo(canvasWidth, imageAreaHeight);
    // ctx.stroke();

    // Check for text overflow (simple check)
    if (currentTextY > canvasHeight - bandPadding / 2) {
        console.warn("Text content might be too long and overflow the designated band area.");
    }
    
    return canvas;
}