Photo Custom Text Editor For Identification Cards

async function processImage(originalImg, name = "Noah Badiou", expiryDate = "August 31, 2026", studentId = "202300422") {
    // 1. Create a canvas and get the 2D rendering context.
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } is a performance hint for the browser,
    // as we will be using getImageData to sample the background color.
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    // 2. Set canvas dimensions to match the original image and draw it onto the canvas.
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;
    ctx.drawImage(originalImg, 0, 0);

    // 3. Define scaling logic.
    // The positions and sizes of text are hardcoded based on a reference width (e.g., 856px, a common ID card dimension).
    // This scaling factor makes the function adaptable to input images of different resolutions.
    const refWidth = 856;
    const scale = w / refWidth;

    // 4. Sample the background color from the image.
    // This is crucial for covering the old text seamlessly. We assume a point on the card
    // that is part of the plain background. The coordinates are scaled.
    // This chosen point is in the general area of the editable text fields.
    const sampleX = Math.round(scale * 500);
    const sampleY = Math.round(scale * 310);
    const bgColorData = ctx.getImageData(sampleX, sampleY, 1, 1).data;
    const bgColor = `rgb(${bgColorData[0]}, ${bgColorData[1]}, ${bgColorData[2]})`;
    ctx.fillStyle = bgColor;

    // 5. Cover the old text ("Noah" and "August 31, 2025") with rectangles.
    // The coordinates and dimensions of these rectangles are estimations based on a typical ID card layout.
    
    // Cover the old name area.
    ctx.fillRect(scale * 330, scale * 315, scale * 300, scale * 45);

    // Cover the old expiry date area.
    ctx.fillRect(scale * 330, scale * 415, scale * 400, scale * 40);

    // 6. Set text properties for drawing the new information.
    // A common, web-safe font like "Arial" is used. Text is assumed to be black.
    ctx.fillStyle = '#000000';
    ctx.textBaseline = 'top';

    // 7. Draw the new text onto the canvas.

    // Draw Name: "Noah Badiou" (bold)
    ctx.font = `bold ${scale * 28}px Arial`;
    ctx.textAlign = 'left';
    ctx.fillText(name, scale * 335, scale * 320);

    // Draw Expiry Date: "August 31, 2026" (regular weight)
    ctx.font = `normal ${scale * 22}px Arial`;
    ctx.textAlign = 'left';
    ctx.fillText(expiryDate, scale * 335, scale * 420);

    // Draw Student ID: "202300422" (bold, centered under "Student ID" label)
    // The horizontal center point is an estimation of where the "Student ID" title is.
    const idLabelCenterX = scale * 588;
    const idNumberY = scale * 240; // Estimated Y position directly below the label
    ctx.font = `bold ${scale * 28}px Arial`; // Same boldness as the name, as requested.
    ctx.textAlign = 'center';
    ctx.fillText(studentId, idLabelCenterX, idNumberY);

    // 8. Return the modified canvas.
    return canvas;
}