Please bookmark this page to avoid losing your image tool!

Image Greyscale 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 greyscale.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @returns {HTMLCanvasElement} A canvas element displaying the greyscaled image.
 */
function processImage(originalImg) {
  // Create a new canvas element
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

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

  // Method 1: Using the built-in canvas filter property (more efficient)
  // Apply a greyscale filter to the canvas context
  ctx.filter = 'grayscale(100%)';
  // Draw the original image onto the canvas. The filter is applied as it's drawn.
  ctx.drawImage(originalImg, 0, 0);


  /*
  // Method 2: Manual pixel manipulation (for older browser compatibility or custom logic)
  // Draw the original image onto the canvas first
  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;

  // Iterate over each pixel (represented by 4 values: R, G, B, A)
  for (let i = 0; i < data.length; i += 4) {
    // Use the luminosity formula to calculate the greyscale value
    // L = 0.299*R + 0.587*G + 0.114*B
    const grey = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;

    // Set the red, green, and blue values to the calculated grey value
    data[i] = grey;     // Red
    data[i + 1] = grey; // Green
    data[i + 2] = grey; // Blue
    // The alpha channel (data[i + 3]) is left unchanged
  }

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

  // Return the canvas with the greyscaled image
  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 Greyscale Converter is a tool that transforms colorful images into greyscale versions. By applying a filter, it removes all colors from the image, resulting in a monochromatic representation. This tool is useful for various applications, such as enhancing the visual appeal of artistic photographs, preparing images for print in environments that require black and white outputs, or simply creating a classic, timeless look for personal projects. Whether for graphic design, photography, or educational purposes, this converter offers an effective way to achieve a greyscale effect seamlessly.

JavaScript Code (For Advanced Users)

Free Image Tool Creator

Description

Leave a Reply Cancel reply

Other Image Tools: