Generating black-white and grayscale images with Javascript and canvas

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!

In today's article, we will build a simple app where we can upload an image, and using Javascript and the canvas element we will get a black-white plus a grayscale version of that image.

black-white and grayscale images with Javascript and canvas

I will not get into too many details about the initial setup of the project. For a better understanding, I encourage you to read the posts about how to upload an image and generate its preview, and invert the colors of a picture on a canvas.

So, we will start with this HTML code:

<input id="inp" type='file' accept='image/*' capture='camera'/>
<img id="img" />
<canvas id="can-bw" width="200" height="200"></canvas>
<canvas id="can-bwg" width="200" height="200"></canvas>

And from this Javascript:

const input = document.querySelector('#inp')
const img = document.querySelector('#img')
const ID_BLACK_WHITE_CANVAS = 'can-bw'
const ID_GRAY_CANVAS = 'can-bwg'

input.addEventListener('change', () => {
  const url = URL.createObjectURL(input.files[0])
  img.src = url
})

img.onload = ()=> {
  setupCanvas(ID_BLACK_WHITE_CANVAS, toBlackAndWhite)
  setupCanvas(ID_GRAY_CANVAS, toBlackWhiteGray)
}

const setupCanvas = (id, pFunction)=> {
  const canvas = document.getElementById(id)
  const ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0)
  processCanvas(canvas, ctx, pFunction)
}

const processCanvas = (canvas, ctx, pFunction)=> {
  const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
  imgData.data = processImgData(imgData, pFunction)
  ctx.putImageData(imgData, 0, 0)
}

const processImgData = ({data}, pFunction) => {
  // use the pFunction to process the image
  return data
}

const toBlackAndWhite = () => {
  // to be implemented
}

const toBlackWhiteGray = (red, green, blue) => {
  // to be implemented
}

For the time being what this code does is just display the same picture we initially upload in the two canvases:
black-white and grayscale images with Javascript and canvas

The data that arrives in the processImgData() is the result of ctx.getImageData(). As we have seen in the example with inverting the colors of a picture each set of 4 items from the data parameter represents an RGBA set for a pixel from the image. So, we can do something like this:

const processImgData = ({data}, pFunction) => {
  for (i = 0; i < data.length; i += 4) {
    data[i] //  red (0-255)
    data[i + 1] //  green (0-255)
    data[i + 2] //  blue (0-255)
    data[i + 3] //  alpha (0-255, 0 = transparent, 255 = fully visible)
  }
  return data
}

Therefore we need to find a way to convert the RGBA values to just one black/white/gray value.

The key points here are the toBlackAndWhite() and toBlackWhiteGray() functions, which are not yet implemented.

A toBlackWhiteGray() function can look like this:

const toBlackAndWhite = (red, green, blue) => {
  const count = red + green + blue
  const colour = count < 383 ? 0 : 255
  return colour
}

While the toBlackWhiteGray() function can look like this:

const toBlackWhiteGray = (red, green, blue) => {
  const count = red + green + blue
  let colour = 0
  if (count > 510) colour = 255
  else if (count > 255) colour = 127.5
  return colour
}

Of course, we can tweak the way we interpret the gray color, and could add a more complex grayscale to the function.

Finally, with these functions implemented, we can now replace a color pixel with the result of one of these functions:

const processImgData = ({data}, pFunction) => {
  for (i = 0; i < data.length; i += 4) {
    const color = pFunction(data[i], data[i+1], data[i+2])
    data[i] = color
    data[i + 1] = color
    data[i + 2] = color
    data[i + 3] = 255
  }
  return data
}

You can see here the full working codepen for this example.

I will leave it as homework to you to implement the functionality of downloading the resulting images. Hint, you can use the download attribute of links for this.

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!


Leave a Reply

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

Home Screencasts Best of Newsletter Search X

Neural Networks for JavaScript developers
Presale - 15$ free coupon

Hi friend! Before you go, just wanted to let you know that in March 2023 I will be launching the TensorFlow.Js by Example course.

This course will include basic concepts of AI and Neural Networks done with TensorFlowJs such as:

  • Working with datasets
  • Visualizing training
  • Deep Neural Networks in JavaScript
  • Reinforcement Learning
  • Convolutional neural networks
  • and much more ...

Also, there will be a lot of examples as:

  • Object detection
  • Natural language processing
  • Face and voice recognition
  • Gaming AI

Join now the waiting list and get a 15$ coupon off the launching price!

X