Please bookmark this page to avoid losing your image tool!

Image Color Temperature Blue 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, strength = 50) {
    // 1. Create canvas and get context
    const canvas = document.createElement('canvas');
    // Add willReadFrequently hint for potential performance improvement in some browsers
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // 2. Set canvas dimensions based on the image's natural dimensions
    // Using naturalWidth/Height is important for getting the original image size
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // 3. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // If image has no dimensions (e.g., not loaded yet or invalid), return canvas as is
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Image has zero width or height. Returning canvas with original draw (if any).");
        return canvas;
    }

    // 4. Get ImageData from the canvas
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error getting ImageData:", e);
        // This can happen due to cross-origin restrictions if the image is loaded without CORS.
        // In such a case, pixel manipulation is not allowed.
        // Return the canvas with the original image drawn on it.
        return canvas;
    }

    const data = imageData.data;

    // 5. Sanitize and prepare the strength parameter
    let sValue = Number(strength);
    if (isNaN(sValue)) {
        // If strength is not a valid number, fall back to a default value (e.g., 50 or the original default)
        sValue = 50; 
    }
    // Ensure strength is not negative for a "blue" filter effect.
    // A negative value could arguably create a "warming" filter, but this tool is for a blue filter.
    sValue = Math.max(0, sValue);
    // Optional:  Clamp sValue to a max (e.g., 255) if desired, though Math.min/max in pixel ops will handle it.
    // sValue = Math.min(sValue, 255);


    // 6. Modify pixel data to apply the CTB filter effect
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];   // Red channel
        const g = data[i+1]; // Green channel
        const b = data[i+2]; // Blue channel
        // Alpha channel (data[i+3]) is typically not modified for this filter

        // Apply CTB effect:
        // - Decrease the red component
        // - Slightly decrease the green component (optional, enhances cooling)
        // - Increase the blue component
        
        data[i] = Math.max(0, r - sValue); // Red: Decrease, clamp at 0
        data[i+1] = Math.max(0, g - sValue * 0.25); // Green: Slightly decrease, clamp at 0. Factor 0.25 is adjustable.
        data[i+2] = Math.min(255, b + sValue); // Blue: Increase, clamp at 255
    }

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

    // 8. Return the 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!

Description

The Image Color Temperature Blue Filter Effect Tool allows users to apply a blue filter effect to images, enhancing the cooler tones while decreasing the warmer tones. This tool can be useful for photographers and graphic designers looking to create a specific mood or theme in their images, such as making photos appear cooler or more refreshing. It is suitable for enhancing outdoor scenes, creating a stylized look, or adjusting the color temperature of images for various aesthetic preferences.

Leave a Reply

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