Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>title</title>
  </head>
  <body>

    <div id='images'>
      <img src='img.jpg' onload='init()' >
    </div>

    <input type='range'
      id='box-size'
      name='volume'
      min='1'
      max='10'>

    <script>

    var img,
        canvas,
        ctx,
        width,
        height;

    function getMean(vals) {
      return vals.reduce(function(sum, i) {
        sum += i; return sum;
      }) / vals.length;
    }

    function getMedian(vals) {
      vals.sort(function(i, j) { return i > j });
      return vals[ parseInt(vals.length/2) ]
    }

    function init() {
      img = document.querySelector('img');
      canvas = document.createElement('canvas');
      ctx = canvas.getContext('2d');
      width = img.width;
      height = img.height;
      draw();
    }

    function draw() {

      var box = parseInt(document.querySelector('#box-size').value);

      // initialize the canvas
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);
      document.querySelector('#images').appendChild(canvas);

      // find the dominant hue in each block size
      for (var x=0; x<Math.ceil(width/box); x++) {
        for (var y=0; y<Math.ceil(height/box); y++) {
          var vals = ctx.getImageData(x*box, y*box, box, box).data;
          var mean = parseInt( getMean(vals) );
          ctx.fillStyle = 'rgba(' + mean + ',' + mean + ',' + mean + ', 255)';
          ctx.fillRect(x*box, y*box, box, box);
        }
      }
    }

    document.querySelector('#box-size').addEventListener('change', draw)

    </script>

  </body>
</html>