Photo To Studio Company Year Converter

function processImage(originalImg, companyName = "Studio Portrait", year = "1994", frameColor = "#fcf9f2", textColor = "#2c2c2c") {
    // Create canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Calculate dimensions proportionally to make sure it looks great on any image size
    const maxDim = Math.max(originalImg.width, originalImg.height);
    const border = Math.max(20, maxDim * 0.05); // Minimum 20px, 5% border on sides and top
    const bottomBorder = Math.max(60, maxDim * 0.15); // Minimum 60px, 15% border on bottom to hold the text
    
    // Set new canvas size that adds the studio cardboard frame around the photo
    canvas.width = originalImg.width + (border * 2);
    canvas.height = originalImg.height + border + bottomBorder;

    // 1. Draw Matte Frame Background (Vintage/Studio paper color)
    ctx.fillStyle = frameColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Draw subtle embossed frame border around the edge of the physical canvas for texture
    ctx.strokeStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.lineWidth = Math.max(1, maxDim * 0.003);
    ctx.strokeRect(border * 0.4, border * 0.4, canvas.width - (border * 0.8), canvas.height - (border * 0.8));

    // 3. Set up drop-shadow for the photograph itself to simulate depth
    ctx.shadowColor = 'rgba(0, 0, 0, 0.35)';
    ctx.shadowBlur = maxDim * 0.015;
    ctx.shadowOffsetX = maxDim * 0.005;
    ctx.shadowOffsetY = maxDim * 0.005;

    // 4. Draw original photograph onto the frame
    ctx.drawImage(originalImg, border, border, originalImg.width, originalImg.height);

    // 5. Reset shadow to avoid affecting upcoming strokes and texts
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;

    // 6. Draw a crisp inner border directly encasing the perimeter of the image (Classic studio style)
    ctx.strokeStyle = textColor;
    ctx.lineWidth = Math.max(1, maxDim * 0.002);
    ctx.strokeRect(border, border, originalImg.width, originalImg.height);

    // 7. Typography settings for the Studio imprint
    const fontSize = bottomBorder * 0.3; // Font scales perfectly with the bottom margin
    ctx.font = `italic ${fontSize}px "Times New Roman", Times, Baskerville, Georgia, serif`;
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Center coordinates for typography
    const textStr = `${companyName}   —   ${year}`;
    const textX = canvas.width / 2;
    const textY = canvas.height - (bottomBorder / 2);

    // 8. Draw elegant horizontal decorative lines flanking the text
    const textWidth = ctx.measureText(textStr).width;
    const linePadding = fontSize;

    ctx.beginPath();
    // Left line
    ctx.moveTo(border * 1.5, textY);
    ctx.lineTo(Math.max(border * 1.5, textX - (textWidth / 2) - linePadding), textY);
    // Right line
    ctx.moveTo(Math.min(canvas.width - (border * 1.5), textX + (textWidth / 2) + linePadding), textY);
    ctx.lineTo(canvas.width - (border * 1.5), textY);
    
    ctx.strokeStyle = textColor;
    ctx.lineWidth = Math.max(1, maxDim * 0.001);
    ctx.stroke();

    // 9. Stamp the Studio and Year Text
    ctx.fillText(textStr, textX, textY);

    return canvas;
}