Please bookmark this page to avoid losing your image tool!

Image Dreamy Glow Filter

(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 = 8, glowBrightness = 1.2, glowOpacity = 0.6) {
    // Ensure numeric types for parameters, coercing if they are strings
    const numBlurAmount = Number(blurAmount);
    const numGlowBrightness = Number(glowBrightness);
    const numGlowOpacity = Number(glowOpacity);

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

    // Use naturalWidth/Height for intrinsic dimensions of the image
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    canvas.width = width;
    canvas.height = height;

    // 1. Create a temporary canvas for the glow layer
    const glowCanvas = document.createElement('canvas');
    glowCanvas.width = width;
    glowCanvas.height = height;
    const glowCtx = glowCanvas.getContext('2d');

    // 2. Prepare the glow layer:
    //    Apply blur and brightness filters. The filter is applied when drawImage is called.
    glowCtx.filter = `blur(${numBlurAmount}px) brightness(${numGlowBrightness})`;
    glowCtx.drawImage(originalImg, 0, 0, width, height);
    
    // It's good practice to reset filter on the context if it were to be used for other drawings,
    // though for this single-use temporary canvas, it's not strictly necessary.
    // glowCtx.filter = 'none';

    // 3. Draw the original image onto the main canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 4. Blend the glow layer onto the main canvas
    //    'screen' blend mode is effective for glow effects as it brightens.
    //    'lighter' (same as 'add' in some software) could also be used for a more intense glow.
    ctx.globalAlpha = numGlowOpacity;
    ctx.globalCompositeOperation = 'screen'; 
    ctx.drawImage(glowCanvas, 0, 0, width, height);

    // 5. Reset main canvas context properties to defaults
    ctx.globalAlpha = 1.0;
    ctx.globalCompositeOperation = 'source-over';
    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 Dreamy Glow Filter tool applies a soft and radiant glow effect to images, enhancing their visual appeal. Users can adjust the blur amount, glow brightness, and glow opacity to customize the effect according to their preferences. This tool is ideal for photographers, graphic designers, and anyone looking to add an artistic touch to their images, creating dreamlike aesthetics suitable for social media posts, digital art, or personal projects.

Leave a Reply

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