Please bookmark this page to avoid losing your image tool!

Image Glimmer Glass Filter Effect Tool

(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, blurAmount = 5, glowStrength = 0.75, highlightBoost = 1.2, outputBrightness = 1.0, outputContrast = 0.95) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    if (w === 0 || h === 0) {
        // Handle cases where image might not be loaded or has no dimensions
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    canvas.width = w;
    canvas.height = h;

    // 1. Draw the base image
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 2. Prepare and blend the glow layer
    //    The glow layer is derived from the original image,
    //    brightened in its highlights, blurred, and then blended.
    if (glowStrength > 0 && blurAmount >= 0) {
        ctx.save(); // Save current state (includes globalAlpha, globalCompositeOperation, filter)

        ctx.globalAlpha = glowStrength; // Set opacity for the glow layer
        ctx.globalCompositeOperation = 'screen'; // 'screen' or 'lighter' are good for blooms. Screen is often softer.

        // Apply filters for the glow: brighten highlights first, then blur
        // Filters are applied in the order they appear in the string.
        let glowFilters = [];
        if (Math.abs(highlightBoost - 1.0) > 0.001) {
            glowFilters.push(`brightness(${highlightBoost})`);
        }
        if (blurAmount > 0) {
            glowFilters.push(`blur(${blurAmount}px)`);
        }
        
        if (glowFilters.length > 0) {
            ctx.filter = glowFilters.join(' ');
        }

        // Draw the original image again. This drawing operation will be
        // filtered and then blended onto the existing canvas content (the base image).
        ctx.drawImage(originalImg, 0, 0, w, h);

        ctx.restore(); // Restore to previous state (clears filter, globalAlpha, globalCompositeOperation)
    }
    // At this point, `canvas` contains the base image plus the blended glow.

    // 3. Apply final adjustments (overall brightness and contrast) to the composed image
    let finalFilters = [];
    if (Math.abs(outputBrightness - 1.0) > 0.001) {
        finalFilters.push(`brightness(${outputBrightness})`);
    }
    if (Math.abs(outputContrast - 1.0) > 0.001) {
        finalFilters.push(`contrast(${outputContrast})`);
    }

    if (finalFilters.length > 0) {
        // To apply a filter to the entire current canvas content, we need to draw it
        // onto itself (or via a temporary canvas) with the filter active.
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = w;
        tempCanvas.height = h;
        const tempCtx = tempCanvas.getContext('2d');
        
        // Copy current composed image to temp canvas
        tempCtx.drawImage(canvas, 0, 0, w, h);

        // Clear main canvas
        ctx.clearRect(0, 0, w, h);
        
        // Apply final filters
        ctx.filter = finalFilters.join(' ');
        
        // Draw the composed image (from tempCanvas) back to the main canvas, applying filters
        ctx.drawImage(tempCanvas, 0, 0, w, h);
        
        // Reset filter on main context
        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 Image Glimmer Glass Filter Effect Tool allows users to enhance images by applying a combination of glow and blur effects, resulting in a visually striking glimmering appearance. Users can adjust various parameters such as blur amount, glow strength, highlight enhancements, and overall brightness and contrast to achieve their desired aesthetic. This tool is useful for photographers, graphic designers, and social media users looking to create captivating images with soft, glowing effects for creative projects, promotional materials, or personal use.

Leave a Reply

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