Please bookmark this page to avoid losing your image tool!

Image Black And White Effect With Orange 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) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image object is loaded and has dimensions
    if (!originalImg || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        console.error("Image not loaded or is a zero-size image.");
        // Return a small, empty canvas as a fallback
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

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

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

    // Get the image data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray

    // Define the factors for the orange color (#FFA500 -> R=255, G=165, B=0)
    // These factors will be applied to the grayscale value.
    const orangeR_Factor = 1.0;         // Corresponds to 255/255
    const orangeG_Factor = 165 / 255;   // Corresponds to 165/255 (approx 0.647)
    const orangeB_Factor = 0.0;         // Corresponds to 0/255

    // Iterate over each pixel
    // Each pixel is 4 components: R, G, B, A
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha channel data[i+3] is preserved

        // Convert to grayscale using the luminosity method
        // gray = 0.299 * R + 0.587 * G + 0.114 * B
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // Apply the orange filter effect by scaling the grayscale value
        // with the orange color factors.
        // Math.round is used for explicit rounding, though Uint8ClampedArray would handle it.
        data[i]   = Math.round(gray * orangeR_Factor); // Red channel
        data[i+1] = Math.round(gray * orangeG_Factor); // Green channel
        data[i+2] = Math.round(gray * orangeB_Factor); // Blue channel
        // data[i+3] (alpha) remains unchanged
    }

    // Put the modified image 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 ‘Image Black And White Effect With Orange Filter’ tool allows users to convert images into a striking black and white style while applying an orange filter effect. This tool is useful for enhancing photos to create a unique aesthetic, perfect for artistic projects, social media posts, or any scenario where a distinctive visual presentation is desired. Users can easily upload their images, and the tool will process them to have a monochrome look infused with vibrant orange tones.

Leave a Reply

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