JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<!-- <div id="placeholder" style="width:600px;height:300px;"></div> -->
<!-- <div id="placeholder2" style="width:600px;height:300px;"></div> -->
<canvas id="scream" style="border:1px solid #d3d3d3;" alt="The Scream"></canvas>
<canvas id="myCanvas" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript

//http://i.imgur.com/WEKjn4K.jpg
//http://i.imgur.com/bQdWzjD.png gray
var scream = document.getElementById("scream");
var myCanvas = document.getElementById("myCanvas");
var originImg = new Image();
originImg.crossOrigin = true;
originImg.src = 'http://i.imgur.com/WEKjn4K.jpg';
originImg.onload = function () {
    scream.width = originImg.width;
    scream.height = originImg.height;
    scream.getContext('2d').drawImage(originImg, 0, 0);
    var imageData = scream.getContext('2d').getImageData(0,0, scream.width, scream.height);
    var newImageData = histogramEqualization(imageData.data);
    myCanvas.getContext('2d').putImageData(newImageData, 0, 0);
}

function sobelOperators (pixels) {
    myCanvas.width = scream.width;
    myCanvas.height = scream.height;
    var newImageData = myCanvas.getContext('2d')
                               .createImageData(
                                   myCanvas.width,
                                   myCanvas.height
                               );
    var operators1 = [[1,2,1],
                     [0,0,0],
                     [-1,-2,-1]];
    var operators2 = [[-1,0,1],
                      [-2,0,2],
                      [-1,0,1]];
    for (var y = 0; y < myCanvas.height; y++) {
        for (var x = 0; x < myCanvas.width; x++) {
            for (var rgb = 0; rgb <= 3; rgb++) {  
                var a = getPos(x, y, myCanvas.width)+rgb;
                if (3 == rgb) {
                    newImageData.data[a] = pixels[a];
                    break;
                }
                
                var lefttop = getPos(x-1, y-1, myCanvas.width)+rgb;
                var top = getPos(x, y-1, myCanvas.width)+rgb;
                var righttop = getPos(x+1, y-1, myCanvas.width)+rgb;
                var left = getPos(x-1, y, myCanvas.width)+rgb;
                var right = getPos(x+1, y, myCanvas.width)+rgb;
                var leftdown = getPos(x-1, y+1, myCanvas.width)+rgb;
                var down = getPos(x, y+1,...