JSFiddle - React, Tailwind, and code Playground

by Subhasish2015

HTML

<script src="https://docs.opencv.org/3.4/opencv.js"></script>
<h2 style="display:none;">Hello OpenCV.js</h2>
<p id="status" style="display:none;">OpenCV.js is loading...</p>
<div>
    <div class="inputoutput">
        <canvas id="tempImg" alt="No Image"></canvas>
        <div class="caption">
            <input type="file" id="fileLoader" name="file" />
            <button id="ahe">AHE</button>
            <button id="clahe">CLAHE</button>
        </div>
    </div>
    <div class="inputoutput">
        <canvas id="canvasOutput" ></canvas>
        <div class="caption">canvasOutput</div>
    </div>
</div>

JavaScript

var c1 = document.getElementById('tempImg');
var c2 = document.getElementById('canvasOutput');
c1.style.height = c2.style.height = window.innerHeight/2 + 'px';
var applyClahe = function(inputCanvas) {
    let src = cv.imread(inputCanvas);
    let equalDst = new cv.Mat();
    let claheDst = new cv.Mat();
    cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
    cv.equalizeHist(src, equalDst);
    let tileGridSize = new cv.Size(8, 8);
    // You can try more different parameters
    let clahe = new cv.CLAHE(40, tileGridSize);
    clahe.apply(src, claheDst);
    //cv.imshow('canvasOutput', equalDst);
    cv.imshow('canvasOutput', claheDst);
    src.delete(); equalDst.delete(); claheDst.delete(); clahe.delete();
};

var applyAHE = function (inputCanvas) {
    let src = cv.imread(inputCanvas);
    let dst = new cv.Mat();

    cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
    cv.equalizeHist(src, dst);
    //cv.imshow('canvasOutput', src);
    cv.imshow('canvasOutput', dst);
    src.delete(); dst.delete();
}

var _canvas = document.getElementById('tempImg');
var fileLoader = document.getElementById('fileLoader');

fileLoader.onchange = function (evt) {
    var tgt = evt.target || window.event.srcElement;
    var files = tgt.files;
    // FileReader support
    if (FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onload = function(e) {
            var img = new Image;
            img.src = e.target.result;
            img.onload = function () {
                _canvas.width = img.width;
                _canvas.height = img.height;
                //get context
                var context = _canvas.getContext('2d');
                context.drawImage(img, 0, 0);
            }
        };
        fr.readAsDataURL(this.files[0]);
    }
}

document.getElementById('ahe').onclick = function () {
	applyAHE(_canvas);
};

document.getElementById('clahe').onclick = function () {
	applyClahe(_canvas);
};