example.html

<html>
  <input type="file" id="input" onchange="reader.readAsDataURL(this.files[0])">
  <h1>grafi.js grayscale sample</h1>
  <h2>original</h2>
  <img id="original">
  <h2>processed</h2>
  <h3>Luma mode</h3>
  <canvas id="luma"></canvas>
  <h3>Simple mode</h3>
  <canvas id="simple"></canvas>
  <h3>Average mode</h3>
  <canvas id="average"></canvas>
  <script src="grafi-grayscale.js"></script>
  <script>
    var original = document.getElementById('original')
    var luma = document.getElementById('luma')
    var simple = document.getElementById('simple')
    var average = document.getElementById('average')
    var lumaCtx = luma.getContext('2d')
    var simpleCtx = simple.getContext('2d')
    var averageCtx = average.getContext('2d')
    var reader = new FileReader()
    reader.onload = function() {
      original.src = reader.result
    }
    original.onload = function () {
      luma.width = original.width
      luma.height = original.height
      simple.width = original.width
      simple.height = original.height
      average.width = original.width
      average.height = original.height
      lumaCtx.drawImage(original, 0, 0)
      lumaImage = grafi.grayscale(lumaCtx.getImageData(0, 0, original.width, original.height))
      simpleImage = grafi.grayscale(lumaCtx.getImageData(0, 0, original.width, original.height), {mode: 'simple', channel: 'r' })
      averageImage = grafi.grayscale(lumaCtx.getImageData(0, 0, original.width, original.height), {mode: 'average'})
      lumaCtx.putImageData(lumaImage, 0, 0)
      simpleCtx.putImageData(simpleImage, 0, 0)
      averageCtx.putImageData(averageImage, 0, 0)
    }
  </script>

</hmtl>