Image filter by JS

Averaging, Median, and Sharpen image filter by JavaScript

by Tinytsunami

HTML

<div id="demo">
  <div>
    <label>
      <input type="file" accept="image/*" />
      <canvas width="10px" height="10px"></canvas>
    </label>
  </div>
  <br />
  <button>Averaging filter</button> <br />
  <button>Median filter</button> <br />
  <button>Sharpen filter (c = 1)</button> <br />
  <button>Sharpen filter (c = -1)</button> <br />
  <br />
</div>

CSS

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

#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;
  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 imageCanvasNode = root.getElementsByTagName("canvas")[0];
  let imageContext = imageCanvasNode.getContext("2d");
  let meanFilterNode = root.getElementsByTagName("button")[0];
  let medianFilterNode = root.getElementsByTagName("button")[1];
  let shapenC1FilterNode = root.getElementsByTagName("button")[2];
  let shapenCneg1FilterNode = root.getElementsByTagName("button")[3];

  let imgData = null;

  // 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);
    };
    img.src = url;
  };

  let meanFilter = function() {
    // Set variables
    let i, j, k, p, q, sum, index;
    let filter = [
      [1, 1, 1],
      [1, 1, 1],
      [1, 1, 1]
    ];
    let w = imgData.width;
    let h = imgData.height;
    let fw = 3;
    let fh = 3;
    let fs = 9;

    // Creating a copy of image data
    let newData = imageContext.createImageData(w, h);
    newData.data.set(imgData.data);

    // Calc. the filter's point (center point, every steps)
    for (i = 1; i < (w - fw - 1); i++) {
      for (j = 1; j < (h - fh - 1); j++) {
        for (k = 0; k < 3; k++) {

          // Calc. the average of pixels of filter range.
          sum = 0;
          for (p = -1; p < fw - 1; p++) {
            for (q = -1; q < fh - 1; q++) {
              index = ((j + q) * w + (i + p)) * 4 + k;
              sum += filter[p + 1][q + 1] * imgData.data[index];
            }
          }
          sum /=...