Please bookmark this page to avoid losing your image tool!

Image To Black And White Bitmap Converter

(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.

/**
 * Converts an image to a black and white bitmap representation.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} threshold The brightness threshold (0-255) to determine black or white.
 *                           Pixels with brightness above this value become white, and others become black.
 *                           Defaults to 128.
 * @returns {HTMLCanvasElement} A canvas element displaying the black and white bitmap image.
 */
function processImage(originalImg, threshold = 128) {
  // Create a new canvas element
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

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

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

  // 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 of [R,G,B,A, R,G,B,A, ...]

  // Iterate over each pixel (4 bytes at a time: 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];

    // Calculate the perceived brightness (luminance) of the pixel
    // Using the standard formula: 0.299*R + 0.587*G + 0.114*B
    const brightness = 0.299 * r + 0.587 * g + 0.114 * b;

    // Determine if the pixel should be black or white based on the threshold
    const color = brightness >= threshold ? 255 : 0;

    // Set the new RGB values for the pixel
    data[i] = color;     // Red
    data[i + 1] = color; // Green
    data[i + 2] = color; // Blue
    // The alpha channel (data[i + 3]) remains unchanged
  }

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

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

Create a custom image tool

Description

The Image To Black And White Bitmap Converter is a tool designed to convert color images into black and white bitmap representations. Users can adjust the brightness threshold to determine which pixels will appear black or white based on their brightness levels. This tool is useful for creating stylized images, preparing graphics for printing where color is not needed, or simplifying complex images into iconic representations. It can be applied in various fields including graphic design, digital art, and document preparation.

JavaScript Code (For Advanced Users)

Free Image Tool Creator

Description

Leave a Reply Cancel reply

Other Image Tools: