Please bookmark this page to avoid losing your image tool!

Image Glaze Filter Application

(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 = 2, saturationFactor = 1.2, contrastFactor = 1.1, brightnessFactor = 1.05, overlayColor = "") {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure originalImg is loaded and has dimensions
    if (!originalImg || typeof originalImg.naturalWidth === 'undefined' || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        console.error("Original image is not loaded or has no dimensions.");
        // Return an empty canvas or throw an error, depending on desired behavior
        canvas.width = 1; // Avoid 0x0 canvas if error occurs later
        canvas.height = 1;
        return canvas; 
    }

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Construct the filter string
    // blurAmount must be non-negative.
    const actualBlurAmount = Math.max(0, blurAmount);
    
    let filterString = '';
    if (actualBlurAmount > 0) {
        filterString += `blur(${actualBlurAmount}px) `;
    }
    // Add other filters only if they are not identity operations
    if (saturationFactor !== 1) {
        filterString += `saturate(${saturationFactor}) `;
    }
    if (contrastFactor !== 1) {
        filterString += `contrast(${contrastFactor}) `;
    }
    if (brightnessFactor !== 1) {
        filterString += `brightness(${brightnessFactor}) `;
    }

    filterString = filterString.trim();

    // Apply the filters to the context if any filter is specified
    if (filterString) {
        ctx.filter = filterString;
    }

    // Draw the original image onto the canvas.
    // The filter (if any) will be applied during this drawing operation.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Reset the filter before drawing the overlay, so the overlay itself is not filtered.
    if (filterString) {
        ctx.filter = 'none';
    }

    // Apply overlay color if specified and valid
    if (overlayColor && typeof overlayColor === 'string' && overlayColor.trim() !== "") {
        try {
            // Test if overlayColor is a valid CSS color.
            // Setting fillStyle with an invalid color might not throw an error immediately,
            // but might be ignored or revert to black. A simple check can be done by assigning.
            ctx.fillStyle = overlayColor; 
            // A more robust check might involve a temporary element and getComputedStyle, 
            // but for this scope, we assume valid CSS color strings are provided if not empty.
            // Checking if fillStyle was actually set to the desired color (or its parsed equivalent)
            // can be complex due to color name resolutions (e.g. "red" becomes "rgb(255,0,0)").
            // For simplicity, we will trust the input string format.
            
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        } catch (e) {
            console.warn("Invalid overlayColor provided:", overlayColor, e);
            // Optionally, do not apply overlay if color is invalid
        }
    }

    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 Glaze Filter Application allows users to enhance and customize images through a variety of visual effects. By applying filters such as blurring, saturation adjustment, contrast enhancement, brightness modification, and color overlays, users can transform their images to achieve a desired aesthetic. This tool is ideal for photographers, graphic designers, and social media enthusiasts looking to modify their images for artistic or professional purposes.

Leave a Reply

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