Please bookmark this page to avoid losing your image tool!

Image Diploma And Degree Certificate Framer

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Diploma and Degree Certificate Framer tool allows users to beautifully frame their diploma and degree certificate images. Users can customize the appearance of the frame by selecting frame colors, widths, mat colors, padding, and optional inner accent lines. This tool is ideal for creating a polished presentation of certificates, making them suitable for display in homes, offices, or educational institutions. Whether for personal use or professional presentation, users can enhance the visual appeal of their certificates with ease.

Leave a Reply

Your email address will not be published. Required fields are marked *