Please bookmark this page to avoid losing your image tool!

Image Glow Effect 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.
/**
 * Adds a glow effect to an image.
 *
 * @param {HTMLImageElement} originalImg The original image element.
 * @param {string} [glowColor='#ffffff'] The color of the glow (e.g., '#ff0000', 'rgb(255,0,0)').
 * @param {number} [glowRange=5] The intensity of the glow. Higher numbers result in a more intense, solid glow.
 * @param {number} [glowOpacity=1] The opacity of the glow, from 0 (transparent) to 1 (opaque).
 * @param {number} [glowBlur=20] The blur radius of the glow. Higher numbers create a softer, more spread-out glow.
 * @returns {HTMLCanvasElement} A new canvas element with the glow effect applied.
 */
function processImage(originalImg, glowColor = '#ffffff', glowRange = 5, glowOpacity = 1, glowBlur = 20) {
    // Coerce parameters to their expected types
    glowRange = Number(glowRange) || 5;
    glowOpacity = Number(glowOpacity) || 1;
    glowBlur = Number(glowBlur) || 20;

    // The glow can extend beyond the original image dimensions, so we need padding.
    // A padding of glowBlur * 2 is a safe margin to avoid clipping the glow effect.
    const padding = glowBlur * 2;
    
    // Create the final canvas that will be returned
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = originalImg.width + padding;
    canvas.height = originalImg.height + padding;

    // The position to draw the image, centered within the padded canvas
    const drawX = padding / 2;
    const drawY = padding / 2;
    
    // Create an offscreen canvas to generate the silhouette for the glow
    const offscreenCanvas = document.createElement('canvas');
    const offscreenCtx = offscreenCanvas.getContext('2d', { willReadFrequently: true });
    offscreenCanvas.width = canvas.width;
    offscreenCanvas.height = canvas.height;

    // 1. Draw the original image onto the offscreen canvas
    offscreenCtx.drawImage(originalImg, drawX, drawY);

    // 2. Create a silhouette of the image using the glow color.
    // 'source-in' composite operation means we fill the canvas with glowColor,
    // but only where the source image (originalImg) was opaque.
    offscreenCtx.globalCompositeOperation = 'source-in';
    offscreenCtx.fillStyle = glowColor;
    offscreenCtx.fillRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);

    // 3. Draw the glow onto the main canvas
    // Apply the blur filter and opacity. The glow is essentially a blurred version of the silhouette.
    ctx.globalAlpha = glowOpacity;
    ctx.filter = `blur(${glowBlur}px)`;

    // Drawing the silhouette multiple times (controlled by glowRange) makes the glow more intense and solid.
    for (let i = 0; i < glowRange; i++) {
        ctx.drawImage(offscreenCanvas, 0, 0);
    }
    
    // 4. Reset filters and draw the original image on top of the glow
    ctx.globalAlpha = 1;
    ctx.filter = 'none';
    ctx.drawImage(originalImg, drawX, drawY);

    // 5. Return the final canvas with the complete effect
    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 Glow Effect Enhancer tool allows users to apply a customizable glow effect to images. Users can adjust parameters such as the glow color, intensity, opacity, and blur to create the desired visual impact. This tool is ideal for enhancing photos, creating eye-catching graphics, or adding artistic touches to digital content. Whether for social media posts, website design, or personal projects, the tool provides an easy way to make images stand out.

Leave a Reply

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