Please bookmark this page to avoid losing your image tool!

Image Sapphire Hue 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, sapphireHueDegrees = 216) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the originalImg is an HTMLImageElement and is loaded.
    // The problem statement implies originalImg is a JavaScript Image object.
    // We'll use naturalWidth and naturalHeight for intrinsic dimensions.
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Set canvas dimensions to match the image
    canvas.width = width;
    canvas.height = height;

    // 1. Draw the original image onto the canvas
    // This provides the "backdrop" for the blending operation.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 2. Set the global composite operation to 'hue'
    // The 'hue' operation takes the hue of the source color (what we draw next)
    // and the saturation and luminosity of the destination/backdrop color (the original image).
    ctx.globalCompositeOperation = 'hue';

    // 3. Define the "Sapphire" hue and create a fill style.
    // The `sapphireHueDegrees` parameter defines the target hue. Default is 216, a common hue for sapphire blue.
    // For the 'hue' blend mode, the saturation and lightness of this fillStyle
    // should ideally not affect the S & L of the resulting image pixels, as these are taken from the backdrop.
    // Using 100% saturation and 50% lightness is a standard way to specify a "pure" hue for the source.
    const fillSaturation = 100; // percent
    const fillLightness = 50;  // percent
    ctx.fillStyle = `hsl(${sapphireHueDegrees}, ${fillSaturation}%, ${fillLightness}%)`;

    // 4. Draw a filled rectangle over the entire canvas
    // This operation will apply the hue from `fillStyle` to each pixel,
    // while preserving each pixel's original saturation and lightness.
    ctx.fillRect(0, 0, width, height);
    
    // 5. Reset the global composite operation to its default state
    // This is good practice if the canvas context is to be used for further drawing operations.
    ctx.globalCompositeOperation = 'source-over';

    // Return the modified canvas
    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 Sapphire Hue Filter Effect Tool allows users to apply a sapphire blue hue filter to their images. This tool enhances photos by adding a distinct blue tint, creating a serene and visually appealing aesthetic. It can be used for various purposes, such as improving the mood of photographs, creating consistent color themes for social media posts, or personalizing images for artistic projects. Users can simply upload their images and apply the sapphire hue effect instantly.

Leave a Reply

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