Posterize and Hue

by Tomás Antunes

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.css">
<div class="file has-name" id="upload_file">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-label">Choose a file…</span>
    </span>
  </label>
</div>
<p>Posterize</p>
<input id="posterize_slider" type="range" min=0 max=25 value=0>
<p>Hue</p>
<input id="hue_slider" type="range" min=0 max=359 value=0>
<br>
<img src="" id="upload_image">
<canvas id="my-canvas"></canvas>

CSS

body {
  padding: 25px;
}
#my-canvas {
    margin: 25px;
}

#upload_image {
  position: absolute;
  top: 10px;
  right: 10px;
  max-height: 150px;
}

JavaScript

var my_canvas = document.getElementById('my-canvas');
		var context = my_canvas.getContext('2d');
		var my_canvas2 = document.createElement('canvas');
		var context2 = my_canvas2.getContext('2d');
		var w;
		var h;
		var levels;
		var img = new Image();
		img.onload = function() {
			init();
		}
    
    upload_file.addEventListener("change", function() {
    	uploadFile();
    })

		function init() {
			w = img.width;
			h = img.height;
			levels = 5;
			
			my_canvas.width = w;
			my_canvas.height = h;
			my_canvas2.width = w;
			my_canvas2.height = h;

			context2.drawImage(img,0,0);
			main();
			hue_slider.onchange = main;
			posterize_slider.onchange = main;
		}
		
		function main() {
			levels = posterize_slider.value;
			imgdata = context2.getImageData(0,0,w,h);
			imgdata = posterize(imgdata, levels);
			context.putImageData(imgdata, 0, 0);
		}
    
    function uploadFile(){
         var upload = document.getElementById('upload_image'); //selects the query named img
         var file    = document.querySelector('input[type=file]').files[0]; //sames as here
         var reader  = new FileReader();

         reader.onloadend = function () {
             upload.src = reader.result;
             img.src = reader.result;
         }

         if (file) {
             reader.readAsDataURL(file); //reads the data as a URL
         } else {
             upload.src = "";
         }
    }

		function posterize(imgdata, levels) {
			d = imgdata.data;
			
			for(var i=0; i<d.length;i += 4) {
				var r = d[i];
				var g = d[i+1];
				var b = d[i+2];
				var avg = (r+g+b) / 3;
				var p = (((avg * levels) >> 8) * 255) / (levels - 1);
				var lum = p / 255;
				var hue = parseInt(hue_slider.value, 10);
				var col = hsl2rgb(hue, 1, lum);    
        
				d[i] = col.r;
				d[i+1] = col.g;
				d[i+2] = col.b;
			}
			imgdata.data = d;
			return imgdata;
		}
		
		function hsl2rgb(h, s, l) {
			var r, g, b, q, p;
			h /= 360;
			if (s == 0) {
				r = g = b = l;
			} else...