Please bookmark this page to avoid losing your image tool!

Image Aura Effect Creator

(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.
/**
 * Creates a glowing aura effect around an image using the canvas shadow properties.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} [auraColor='#00bfff'] The color of the aura. Accepts any valid CSS color string (e.g., 'red', '#ff0000', 'rgba(255,0,0,0.5)').
 * @param {number} [blurRadius=20] The size and blurriness of the aura. Larger values create a bigger, softer glow.
 * @param {number} [offsetX=0] The horizontal offset of the aura relative to the image. A positive value shifts it right, a negative value shifts it left.
 * @param {number} [offsetY=0] The vertical offset of the aura relative to the image. A positive value shifts it down, a negative value shifts it up.
 * @returns {HTMLCanvasElement} A new canvas element displaying the image with the aura effect.
 */
function processImage(originalImg, auraColor = '#00bfff', blurRadius = 20, offsetX = 0, offsetY = 0) {
    // Sanitize and validate parameters to ensure they are numbers.
    const safeBlurRadius = Math.max(0, Number(blurRadius)) || 0;
    const safeOffsetX = Number(offsetX) || 0;
    const safeOffsetY = Number(offsetY) || 0;

    // Create a new canvas to hold the result.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Calculate the required canvas dimensions. The canvas needs to be larger than the
    // original image to accommodate the blur radius and any offsets without clipping the aura.
    const widthPadding = safeBlurRadius * 2 + Math.abs(safeOffsetX);
    const heightPadding = safeBlurRadius * 2 + Math.abs(safeOffsetY);

    canvas.width = originalImg.width + widthPadding;
    canvas.height = originalImg.height + heightPadding;

    // Calculate the position to draw the image on the canvas. This position ensures
    // there's enough space on all sides for the aura to render, adjusting for negative
    // offsets by shifting the drawing position.
    const drawX = safeBlurRadius + Math.max(0, -safeOffsetX);
    const drawY = safeBlurRadius + Math.max(0, -safeOffsetY);

    // --- Create the Aura ---
    // Set the canvas context's shadow properties. These properties will be applied to
    // subsequent drawing operations, effectively creating our aura effect. The shadow
    // is only rendered for the non-transparent parts of the drawn image.
    ctx.shadowColor = auraColor;
    ctx.shadowBlur = safeBlurRadius;
    ctx.shadowOffsetX = safeOffsetX;
    ctx.shadowOffsetY = safeOffsetY;

    // To create a more intense and vibrant glow, we draw the image multiple times with the
    // shadow effect enabled. Since the default composite operation is 'source-over', this
    // stacks the semi-transparent shadow on top of itself, making it more opaque and
    // brighter near the image outline.
    ctx.drawImage(originalImg, drawX, drawY);
    ctx.drawImage(originalImg, drawX, drawY);
    ctx.drawImage(originalImg, drawX, drawY);

    // --- Draw the Original Image on Top ---
    // Turn off the shadow effect by resetting the properties to transparent/zero.
    // If we skip this step, the final crisp image drawn on top would also cast a shadow.
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;

    // Finally, draw the original, crisp image on top of the generated glow.
    ctx.drawImage(originalImg, drawX, drawY);

    // Return the final canvas element which can be appended to the DOM.
    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 Aura Effect Creator is an online tool that allows users to apply a glowing aura effect around their images. By adjusting parameters such as aura color, blur radius, and offsets, users can create visually striking images suitable for various applications, including graphic design, social media posts, and personal art projects. This tool is ideal for those looking to enhance their images with unique visual effects, making them stand out in presentations or digital artwork.

Leave a Reply

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