Please bookmark this page to avoid losing your image tool!

Photo Radiant Filter Enhancer

(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.
function processImage(
    originalImg,
    brightnessLevel = 1.1, // Default: 110% brightness. 1.0 is no change.
    contrastLevel = 1.1,   // Default: 110% contrast. 1.0 is no change.
    saturationLevel = 1.2, // Default: 120% saturation. 1.0 is no change, 0 is grayscale.
    glowAmount = 5,        // Default: 5px blur radius for glow. Set to 0 to disable. Must be non-negative.
    glowColor = 'rgba(255, 255, 220, 0.3)' // Default: Light, warm, translucent yellow glow.
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Parse and validate parameters.
    // Uses signature defaults if parameters are undefined.
    // If parameters are provided but invalid (e.g., "foo", null), use signature defaults.
    const parsedBrightness = Number(brightnessLevel);
    const br = isFinite(parsedBrightness) ? parsedBrightness : 1.1;

    const parsedContrast = Number(contrastLevel);
    const co = isFinite(parsedContrast) ? parsedContrast : 1.1;

    const parsedSaturation = Number(saturationLevel);
    const sa = isFinite(parsedSaturation) ? parsedSaturation : 1.2;
    
    const parsedGlowAmount = Number(glowAmount);
    let glAmt = isFinite(parsedGlowAmount) ? parsedGlowAmount : 5;
    glAmt = Math.max(0, glAmt); // Ensure glow amount is non-negative. 0 disables glow.
    
    const glCol = String(glowColor); // glowColor must be a string (CSS color format).

    // Get image dimensions. Use naturalWidth/Height for intrinsic image size.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // If image dimensions are invalid or zero, return a minimal 1x1 canvas.
    // This avoids errors with 0x0 canvases in some environments.
    if (!imgWidth || !imgHeight || imgWidth === 0 || imgHeight === 0) {
        console.warn("Photo Radiant Filter Enhancer: Original image has zero width or height. Returning 1x1 canvas.");
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }
    
    let canvasWidth = imgWidth;
    let canvasHeight = imgHeight;
    let drawOffsetX = 0;
    let drawOffsetY = 0;

    // If glow is enabled (glowAmount > 0), adjust canvas size and drawing offset
    // to make space for the glow effect (which is rendered via drop-shadow).
    if (glAmt > 0) {
        // The blur-radius of drop-shadow extends outwards from the object's edges.
        // Padding equal to the glowAmount on each side is a reasonable minimum
        // to accommodate the visible extent of the blur for a 0-offset shadow.
        const padding = glAmt; 
        drawOffsetX = padding;
        drawOffsetY = padding;
        canvasWidth += 2 * padding;
        canvasHeight += 2 * padding;
    }

    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    // Construct the CSS filter string for the canvas context.
    // Only add filter components if they differ from their identity values to keep the filter string minimal.
    const filterParts = [];
    if (sa !== 1.0) { // 1.0 is identity for saturation (100%)
        filterParts.push(`saturate(${sa})`);
    }
    if (br !== 1.0) { // 1.0 is identity for brightness (100%)
        filterParts.push(`brightness(${br})`);
    }
    if (co !== 1.0) { // 1.0 is identity for contrast (100%)
        filterParts.push(`contrast(${co})`);
    }

    if (glAmt > 0) {
        // The drop-shadow filter takes: offset-x offset-y blur-radius color
        // For a centered glow, offset-x and offset-y are 0.
        filterParts.push(`drop-shadow(0px 0px ${glAmt}px ${glCol})`);
    }
    
    const filterString = filterParts.join(' ');

    // Apply the combined filter string to the canvas context if any filters are active.
    if (filterString) {
        ctx.filter = filterString;
    }

    // Draw the original image onto the canvas.
    // It's drawn at (drawOffsetX, drawOffsetY) with its original dimensions (imgWidth, imgHeight).
    // The canvas context's filter (if set) will be applied to this drawing operation.
    ctx.drawImage(originalImg, drawOffsetX, drawOffsetY, imgWidth, imgHeight);
    
    // It's good practice to reset the filter on the context after use,
    // although for a newly created canvas that's immediately returned and not reused, it's less critical.
    if (filterString) {
        ctx.filter = 'none';
    }

    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 Photo Radiant Filter Enhancer is an online tool designed to enhance your images by adjusting their brightness, contrast, and saturation, as well as adding a glowing effect. This tool can be used for various purposes, such as improving the appearance of photographs, creating visually appealing graphics for social media, or enhancing images for personal projects. With customizable settings for brightness, contrast, saturation, and glow effect, users can achieve a radiant and vibrant look that suits their specific needs.

Leave a Reply

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