Please bookmark this page to avoid losing your image tool!

Photo Ultraviolet Filter Effect Tool

(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) {
    const canvas = document.createElement('canvas');
    // The willReadFrequently hint can be beneficial for performance in some browsers.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Handle cases where the image might not be fully loaded or has no dimensions
    if (width === 0 || height === 0) {
        // Return a minimal canvas or handle error as appropriate
        // For this example, returning a 1x1 canvas to meet "must return canvas"
        console.warn("Original image has zero dimensions. Returning a 1x1 canvas.");
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

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

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

    let imageData;
    try {
        // Get the pixel data from the canvas
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        // This can happen due to CORS restrictions if the image is from another domain
        // and the server doesn't send appropriate CORS headers.
        console.error("Could not get image data for processing (CORS issue?):", e);
        // In case of an error (e.g., canvas is tainted), return the canvas
        // with the original image drawn on it.
        return canvas;
    }
    
    const data = imageData.data;

    // Iterate over each pixel (RGBA components)
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];      // Red
        const g = data[i + 1];  // Green
        const b = data[i + 2];  // Blue
        // Alpha (data[i + 3]) will be preserved

        // Apply the "Ultraviolet Filter Effect"
        // These coefficients are chosen to simulate an artistic UV/blacklight effect:
        // - Reds are made purplish.
        // - Greens are heavily suppressed.
        // - Blues are intensified and slightly mixed with red.
        // - White areas tend towards magenta/bright purple.
        
        const newR = r * 0.7 + b * 0.3;
        const newG = g * 0.2;
        const newB = b * 1.2 + r * 0.1;

        // Assign new values, clamping them to the valid [0, 255] range
        data[i] = Math.min(255, Math.max(0, newR));
        data[i + 1] = Math.min(255, Math.max(0, newG));
        data[i + 2] = Math.min(255, Math.max(0, newB));
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    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 Photo Ultraviolet Filter Effect Tool applies a creative ultraviolet filter effect to images, altering colors to enhance blues and purples while suppressing greens. This tool is ideal for artists, photographers, and social media enthusiasts looking to create a unique, vibrant aesthetic in their images, perfect for digital art, promotional materials, or personal projects. Users can easily transform their images to add a distinctive and artistic flair.

Leave a Reply

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