Please bookmark this page to avoid losing your image tool!

Image Black And White With Orange #21 Filter Effect Tool

(Free & Supports Bulk Upload)

The result will appear here...

JavaScript Code (For Advanced Users)

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 is loaded and dimensions are available
  const imgWidth = originalImg.naturalWidth || originalImg.width;
  const imgHeight = originalImg.naturalHeight || originalImg.height;

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

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

  // Get the image data from the canvas
  const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
  const data = imageData.data;

  // Define the weights for the Orange #21 filter effect
  // These weights aim to simulate an orange filter:
  // - Reds and yellows become lighter
  // - Blues become darker
  // - Greens are moderately affected, often appearing slightly lighter
  const redWeight = 0.6;
  const greenWeight = 0.3;
  const blueWeight = 0.1;

  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

    // Calculate the grayscale value using the orange filter weights
    let gray = Math.round(r * redWeight + g * greenWeight + b * blueWeight);

    // Clamp the value to ensure it's within the 0-255 range
    // (though with weights summing to 1.0 and inputs in 0-255, it should be fine)
    gray = Math.max(0, Math.min(255, gray));

    // Apply the grayscale value to R, G, and B channels
    data[i] = gray;     // Red
    data[i + 1] = gray; // Green
    data[i + 2] = gray; // Blue
  }

  // 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!

Create a custom image tool

Description

The Image Black and White with Orange #21 Filter Effect Tool allows users to transform their images into a striking black and white format while applying an orange filter effect. This tool is ideal for photographers and graphic designers looking to enhance their images for artistic purposes, create vintage-style effects, or prepare images for print by adjusting color balances. The resulting effect highlights reds and yellows, making them lighter, while muting blues, suitable for creating distinct visual styles in photography or social media content.

JavaScript Code (For Advanced Users)

Free Image Tool Creator

Description

Leave a Reply Cancel reply

Other Image Tools: