JSFiddle - React, Tailwind, and code Playground

by Ilya Karpuk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li id="openimage"><a href="#">Open...</a></li>
        <li><a href="#">Link</a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Filters <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="javascript:Cavsik.grayscale()">Grayscale</a></li>
          </ul>
        </li>
      </ul>
  </div>
</nav>
<div class="container-fluid image-container">
    <canvas id="canvas"></canvas>
</div>

CSS

.navbar-nav {
	margin:0;
}
.navbar-nav > li {
	float:none;
    display:inline-block;
}
.navbar-nav > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
}
.navbar-nav > li.open > ul.dropdown-menu {
  position: absolute;
  border: 1px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.image-container {
    height: 300px;
}

#canvas {
    height: 300px;
    width: 100%;
}

JavaScript

var openimage = document.getElementById( "openimage" );
var canvas = document.getElementById( "canvas" );
var ctx = canvas.getContext( "2d" );
var imgdata = null;
openimage.addEventListener( "click", function (e){
	var input = document.createElement( "input" );
    input.type = "file";
    input.accept = "image/jpeg,image/png"
    input.click();
    input.addEventListener( "change", function (e){
    	var file = e.target.files[0];
        var reader = new FileReader();
        
        reader.onload = function (evt){
            imgdata = evt.target.result;
            var img = new Image();
            img.onload = function (){
                var ratioW = canvas.width / img.width;
                var ratioH = canvas.height / img.height;
                var ratio = Math.min( ratioW, ratioH );
                var width = img.width * ratio;
                var height = img.height * ratio;
                var centerX = canvas.width / 2 - width / 2;
                var centerY = canvas.height / 2 - height / 2;
            	if ( ratio < 1 ) 
            		ctx.drawImage( img, centerX,centerY, 
                                  		width, height );
                else
                    ctx.drawImage( img, centerX, centerY );
            }
            img.src = imgdata;
        }
        
        reader.readAsDataURL( file );
    }, false );
    
    input.value = "";
}, false );

var Cavsik = {};
var Cavsik.Filter = {};
Cavsik.getPixels = function (){
    return ctx.getImageData( 0, 0, canvas.width, canvas.height );
}

Cavsik.applyFilter = function(filter, var_args) {
  var args = [this.getPixels()];
  for (var i=1; i<arguments.length; i++) {
    args.push(arguments[i]);
  }
  return filter.apply(null, args);
};

Cavsik.Filter.Grayscale = function(pixels, args) {
  var d = pixels.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 v = 0.2126*r + 0.7152*g + 0.0722*b;
    d[i] = d[i+1] = d[i+2] = v
  }
  return...