Histogram equalization by JS

A simple Histogram equalization demo Lagrange interpolating by JS.

by Tinytsunami

HTML

<div id="demo">
   <div>
     <label>
       <input type="file" accept="image/*" />
       <canvas width="10px" height="10px"></canvas>
     </label>
   </div>
   <canvas width="768px" height="120px"></canvas>
   <br />
   <button>histogram equalization</button>
 </div>

CSS

body {
  color: #ffffff;
  background: #20262e;
  font-family: monospace, sans-serif;
}

#demo {
  padding: 5px;
}

#demo canvas {
  border: solid 1px #ffffff;
}

#demo>div {
  margin-top: 5px;
}

#demo label input {
  color: #ffffff;
  background: #20262e;
  outline: none;
  display: none;
}

#demo label:hover {
  cursor: pointer;
}

#demo label div {
  float: left;
  font-weight: bold;
  font-size: 13.3333px;
  text-align: center;
  padding: 1px 6px;
  margin-right: 10px;
  color: #ffffff;
  background: #20262e;
  border: 1px solid #ffffff;
  outline: none;
}

#demo label div:hover {
  color: #20262e;
  background: #ffffff;
  border: 1px solid #ffffff;
}

#demo button {
  font-weight: bold;
  float: left;
  color: #ffffff;
  background: #20262e;
  border: 1px solid #ffffff;
  outline: none;
  margin-right: 10px;
  margin-top: 3px;
  cursor: pointer;
}

#demo button:hover {
  color: #20262e;
  background: #ffffff;
  border: 1px solid #ffffff;
}

JavaScript

(function() {
  /* get elements */
  let root = document.getElementById("demo");
  let inputNode = root.getElementsByTagName("input")[0];
  let processNode = root.getElementsByTagName("button")[0];
  let imageCanvasNode = root.getElementsByTagName("canvas")[0];
  let imageContext = imageCanvasNode.getContext("2d");
  let histogramCanvasNode = root.getElementsByTagName("canvas")[1];
  let histogramContext = histogramCanvasNode.getContext("2d");

  let imgData = null;

  let histogram = Array.from({
    length: 3
  }, () => {
    return Array.from({
      length: 256
    }, () => 0);
  });

  let minHistogram = Array.from({
    length: 3
  }, () => 0);
  let maxHistogram = Array.from({
    length: 3
  }, () => 0);

  let cdf = Array.from({
    length: 3
  }, () => {
    return Array.from({
      length: 256
    }, () => 0);
  });

  // upload image
  inputNode.onchange = function() {
    let file = inputNode.files[0];
    if (file) {
      createImage(URL.createObjectURL(file));
    }
  };

  // create image to canvas
  let createImage = function(url) {
    let img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = function() {
      imageCanvasNode.width = img.width;
      imageCanvasNode.height = img.height;
      imageContext.drawImage(img, 0, 0);
      imgData = imageContext.getImageData(0, 0, img.width, img.height);
      calcHistogram();
      drawHistogram();
    };
    img.src = url;
  };

  // calculate histogram
  let calcHistogram = function() {
    // clear
    for (let c = 0; c < 3; c += 1) {
      for (let i = 0; i < 256; i += 1) {
        histogram[c][i] = 0;
      }
    }

    // calc.
    for (let i = 0, l = imgData.data.length; i < l; i += 4) {
      for (let c = 0; c < 3; c += 1) {
        histogram[c][imgData.data[i + c]] += 1;
      }
    }

    // get range
    for (let c = 0; c < 3; c += 1) {
      minHistogram[c] = histogram[c].reduce((m, v) => Math.min(m, v), 0);
      maxHistogram[c] = histogram[c].reduce((m, v) =>...