/* full code and example here: https://www.js-craft.io/blog/generating-black-white-and-grayscale-images-with-javascript-and-canvas */


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) => {
  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
}

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

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
}