Please bookmark this page to avoid losing your image tool!

Joyful Photo 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, brightness = 1.2, contrast = 1.1, saturation = 1.3, warmthAlpha = 0.1) {
    // Ensure the original image is loaded and valid
    // The `naturalWidth` and `naturalHeight` properties are 0 if the image is not loaded or is invalid.
    if (!originalImg || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        console.error("Joyful Photo Filter: Original image is not loaded or invalid.");
        // Return a small, empty canvas as a fallback.
        // This helps in environments where a canvas element is expected.
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 1; // Use 1x1 to avoid issues with 0x0 dimensions
        errorCanvas.height = 1;
        const errorCtx = errorCanvas.getContext('2d');
        if (errorCtx) {
            // Optionally fill with a color to indicate it's a placeholder/error state
            errorCtx.fillStyle = 'lightgray'; 
            errorCtx.fillRect(0, 0, 1, 1);
        }
        return errorCanvas;
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // It's highly unlikely getContext('2d') would fail in modern browsers for a new canvas,
    // but defensive checking is good practice.
    if (!ctx) {
        console.error("Joyful Photo Filter: Could not get 2D rendering context.");
        // Return the canvas as is (it will be blank) or the error canvas from above logic
        // For consistency, let's ensure dimensions if we return this unadorned canvas.
        canvas.width = originalImg.naturalWidth || 1; // Fallback to 1 if naturalWidth somehow became 0 post-check
        canvas.height = originalImg.naturalHeight || 1;
        return canvas;
    }

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

    // Apply brightness, contrast, and saturation filters
    // These values are multipliers: 1.0 means no change.
    // e.g., brightness = 1.2 means 20% brighter.
    // e.g., contrast = 1.1 means 10% more contrast.
    // e.g., saturation = 1.3 means 30% more saturated.
    const filterString = `brightness(${brightness}) contrast(${contrast}) saturate(${saturation})`;
    ctx.filter = filterString;

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

    // Reset the filter. This ensures that subsequent drawing operations (like the warmth overlay)
    // are not affected by the brightness/contrast/saturation adjustments.
    ctx.filter = 'none';

    // Apply a warmth overlay if warmthAlpha is positive and valid.
    // warmthAlpha typically ranges from 0.0 (no warmth) to around 0.2-0.3 for a noticeable effect.
    // A value of 0.1 provides a subtle warmth.
    if (warmthAlpha > 0 && warmthAlpha <= 1) {
        // Set the global alpha for the transparency of the warmth layer.
        ctx.globalAlpha = warmthAlpha;
        
        // Choose a warm color. A light, warm orange or yellow works well.
        // 'rgb(255, 200, 50)' is a pleasant warm orange-yellow.
        ctx.fillStyle = 'rgb(255, 200, 50)'; 
        
        // Fill the entire canvas with the semi-transparent warm color.
        // This layer is drawn on top of the already filtered image.
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // Reset global alpha to its default value (1.0) for any further drawing,
        // though not strictly necessary here as it's the last operation.
        ctx.globalAlpha = 1.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 Joyful Photo Filter Application allows users to enhance their images by applying brightness, contrast, and saturation adjustments, as well as a warm overlay effect. This tool is ideal for anyone looking to improve photo quality or add a cheerful tone to their images, making it useful for personal photos, social media posts, or any creative project. By adjusting these parameters, users can achieve a warmer and more vibrant look, suitable for enhancing portraits, landscapes, and artistic visuals.

Leave a Reply

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