Please bookmark this page to avoid losing your image tool!

Image Filter And Transparent Overlay Creator

(Free & Supports Bulk Upload)

The result will appear here...

JavaScript Code (For Advanced Users)

You can edit the below JavaScript code to customize the image tool.

/**
 * Applies CSS-style filters and a semi-transparent color overlay to an image.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} filterString A string representing the CSS filter(s) to apply (e.g., 'grayscale(1) brightness(1.5) blur(2px)').
 * @param {string} overlayColor A string representing the color of the overlay, including its opacity (e.g., 'rgba(255, 0, 0, 0.5)', '#00FF0080', 'blue').
 * @returns {HTMLCanvasElement} A new canvas element with the filtered image and overlay.
 */
function processImage(originalImg, filterString = 'none', overlayColor = 'rgba(0, 0, 0, 0)') {
    // Create a new canvas element in memory
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use the natural dimensions of the image to ensure the canvas is the correct size
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Set canvas dimensions
    canvas.width = width;
    canvas.height = height;

    // Apply the CSS-style filter string to the canvas context.
    // This will affect any subsequent drawing operations.
    ctx.filter = filterString;

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

    // Reset the filter to 'none' so that it doesn't affect the overlay we're about to draw.
    ctx.filter = 'none';

    // Set the fill style for the overlay. The color string itself can contain the alpha/opacity.
    ctx.fillStyle = overlayColor;

    // Draw a rectangle covering the entire canvas with the specified overlay color and opacity.
    ctx.fillRect(0, 0, width, height);

    // Return the final canvas element
    return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Create a custom image tool

Description

The Image Filter And Transparent Overlay Creator is a versatile online tool that allows users to enhance and modify images by applying various CSS-style filters and adding semi-transparent color overlays. This tool is particularly useful for creating visually appealing graphics, such as social media posts, marketing materials, or website images. Users can customize the appearance of their images by adjusting brightness, contrast, and applying effects like grayscale or blur, while also adding colored overlays to emphasize or alter the mood of the image.

JavaScript Code (For Advanced Users)

Free Image Tool Creator

Description

Leave a Reply Cancel reply

Other Image Tools: