Please bookmark this page to avoid losing your image tool!

Blissful Photo Filter

(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, 
    brightness = 1.05,        // Example: 1.0 for original, 1.1 for 10% brighter. Values typically 0.0 to N.
    saturation = 1.1,         // Example: 1.0 for original, 1.2 for 20% more saturation. Values typically 0.0 to N.
    sepia = 0.15,             // Example: 0.0 for no sepia, 0.0 to 1.0 for sepia effect. Subtle values (0.1-0.3) add warmth.
    contrast = 0.95,          // Example: 1.0 for original, 0.9 for 10% less contrast (softer). Values typically 0.0 to N.
    overlayColorStr = "255,210,170", // RGB string for overlay color, e.g., "R,G,B". Warm peach/light orange.
    overlayOpacity = 0.15     // Opacity for the color overlay (0.0 to 1.0). Used with 'soft-light' blend.
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for intrinsic image dimensions
    // Fallback to width/height if naturalWidth/Height are 0 (e.g. for SVG images or not-yet-loaded)
    canvas.width = originalImg.naturalWidth || originalImg.width || 0;
    canvas.height = originalImg.naturalHeight || originalImg.height || 0;

    if (canvas.width === 0 || canvas.height === 0) {
        // Handle cases where the image might not have loaded or has no dimensions
        console.warn("Image has zero width or height, or is not fully loaded. Returning empty canvas.");
        return canvas;
    }

    // Construct the filter string from parameters
    // CSS filters are powerful and hardware-accelerated in many browsers.
    const filters = [];
    // Only add filters if they differ from non-effect values to keep string short and behavior predictable.
    if (typeof brightness === 'number' && brightness !== 1.0) filters.push(`brightness(${brightness})`);
    if (typeof saturation === 'number' && saturation !== 1.0) filters.push(`saturate(${saturation})`);
    if (typeof sepia === 'number' && sepia !== 0.0) filters.push(`sepia(${sepia})`);
    if (typeof contrast === 'number' && contrast !== 1.0) filters.push(`contrast(${contrast})`);
    
    if (filters.length > 0) {
        ctx.filter = filters.join(' ');
    }

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

    // Reset filter: subsequent operations (like overlay) should not be affected by these image filters
    ctx.filter = 'none'; 

    // Apply color overlay if specified
    if (typeof overlayOpacity === 'number' && overlayOpacity > 0 && overlayOpacity <= 1.0 && typeof overlayColorStr === 'string' && overlayColorStr) {
        // Parse the overlayColorStr (e.g., "255,210,170")
        const colorParts = overlayColorStr.split(',').map(str => Number(str.trim()));
        
        if (colorParts.length === 3 && colorParts.every(num => !isNaN(num) && num >= 0 && num <= 255)) {
            const [r_overlay, g_overlay, b_overlay] = colorParts;
            
            // Set the fill color (opaque for blend mode calculations)
            ctx.fillStyle = `rgb(${r_overlay}, ${g_overlay}, ${b_overlay})`;
            
            // Use 'soft-light' for a gentle, integrated color tone. 'overlay' mode is stronger.
            // Other blend modes like 'screen' or 'color-dodge' with a very low opacity might also achieve dreamy effects.
            ctx.globalCompositeOperation = 'soft-light'; 
            
            // Control the intensity of the blended overlay with globalAlpha
            ctx.globalAlpha = overlayOpacity;
            
            // Draw the overlay rectangle
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // Reset globalAlpha and globalCompositeOperation to their defaults for subsequent drawing
            ctx.globalAlpha = 1.0;
            ctx.globalCompositeOperation = 'source-over'; 
        } else {
            console.warn("Invalid overlayColorStr format or color values. Expected 'R,G,B' with values 0-255 each (e.g., '255,210,170'). Overlay skipped.");
        }
    }

    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

Blissful Photo Filter is an online tool designed to enhance your images by applying a variety of customizable filters. It allows users to adjust brightness, saturation, sepia tint, and contrast to achieve the desired look for their photos. Additionally, a soft color overlay can be applied to create a warm, artistic effect. This tool is ideal for photographers, social media enthusiasts, and anyone looking to improve their images for personal use, sharing, or professional presentations.

Leave a Reply

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