Image Diploma And Degree Certificate Framer

async function processImage(originalImg, frameColor = '#8B4513', frameWidth = 20, matColor = '#FFFFF0', matPadding = 40, innerLineColor = '#DAA520', innerLineWidth = 2) {
    // Ensure numeric parameters are actual numbers and non-negative.
    // parseFloat will handle string representations of numbers (e.g., "25").
    // If parsing results in NaN or the value is negative, it defaults to 0, effectively removing that visual element.
    let numFrameWidth = parseFloat(String(frameWidth));
    numFrameWidth = (isNaN(numFrameWidth) || numFrameWidth < 0) ? 0 : numFrameWidth;

    let numMatPadding = parseFloat(String(matPadding));
    numMatPadding = (isNaN(numMatPadding) || numMatPadding < 0) ? 0 : numMatPadding;

    let numInnerLineWidth = parseFloat(String(innerLineWidth));
    numInnerLineWidth = (isNaN(numInnerLineWidth) || numInnerLineWidth < 0) ? 0 : numInnerLineWidth;

    // Validate the originalImg object and its dimensions
    if (!originalImg || typeof originalImg.width !== 'number' || typeof originalImg.height !== 'number' || originalImg.width <= 0 || originalImg.height <= 0) {
        // Create a placeholder canvas indicating an error if the image is invalid
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 300;
        errorCanvas.height = 150;
        const errorCtx = errorCanvas.getContext('2d');
        
        errorCtx.fillStyle = '#f0f0f0'; // Light gray background
        errorCtx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
        
        errorCtx.fillStyle = '#FF0000'; // Red text color
        errorCtx.font = 'bold 16px Arial';
        errorCtx.textAlign = 'center';
        errorCtx.textBaseline = 'middle';
        errorCtx.fillText('Invalid Image Object', errorCanvas.width / 2, errorCanvas.height / 2 - 10);
        errorCtx.font = '14px Arial';
        errorCtx.fillText('Please provide a valid loaded image.', errorCanvas.width/2, errorCanvas.height/2 + 15);
        
        console.error("processImage: Invalid originalImg or image dimensions.");
        return errorCanvas;
    }

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

    // Calculate total dimensions for the new canvas including frame, mat, and image
    const totalWidth = originalImg.width + 2 * numMatPadding + 2 * numFrameWidth;
    const totalHeight = originalImg.height + 2 * numMatPadding + 2 * numFrameWidth;

    canvas.width = totalWidth;
    canvas.height = totalHeight;

    // 1. Draw Outer Frame
    // The frame is the outermost layer.
    ctx.fillStyle = String(frameColor); // Ensure color is a string
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Draw Mat
    // The mat sits inside the frame.
    // Its position starts after the frameWidth on each side.
    const matX = numFrameWidth;
    const matY = numFrameWidth;
    // The mat's width and height are the total area inside the frame.
    const matW = originalImg.width + 2 * numMatPadding;
    const matH = originalImg.height + 2 * numMatPadding;
    
    ctx.fillStyle = String(matColor); // Ensure color is a string
    ctx.fillRect(matX, matY, matW, matH);

    // 3. Draw Inner Line (optional accent line)
    // This line is drawn on the mat, around where the image will be placed.
    // It's implemented as a filled rectangle that will be partially overlaid by the image.
    // This leaves the visible parts of this rectangle as a border around the image.
    if (numInnerLineWidth > 0) {
        // The line's rectangle starts `numInnerLineWidth` pixels outside the image area.
        const lineRectX = numFrameWidth + numMatPadding - numInnerLineWidth;
        const lineRectY = numFrameWidth + numMatPadding - numInnerLineWidth;
        // The line's rectangle is wider/taller than the image by `2 * numInnerLineWidth`.
        const lineRectW = originalImg.width + 2 * numInnerLineWidth;
        const lineRectH = originalImg.height + 2 * numInnerLineWidth;
        
        ctx.fillStyle = String(innerLineColor); // Ensure color is a string
        ctx.fillRect(lineRectX, lineRectY, lineRectW, lineRectH);
    }

    // 4. Draw the original image onto the canvas
    // The image is placed inside the mat and any inner line.
    const imgX = numFrameWidth + numMatPadding;
    const imgY = numFrameWidth + numMatPadding;
    
    ctx.drawImage(originalImg, imgX, imgY, originalImg.width, originalImg.height);

    return canvas;
}