JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div id="can_cont">
    <canvas id="can"></canvas>
</div>
<input type="range" id="pixDiff" min="0" max="255" step="1" value="175" />
<div id="filesDropArea">Upload image</div>
<script>
    function dropping(event) {
        $("#filesDropArea").addClass("dropping").text("Drop files here");
        eventHandler(event);
    }

    function dropped(event) {
        $("#filesDropArea").removeClass("dropping").text("File(s) dropped");
        var file_dropped = event.dataTransfer.files[0];
        var fileReader = new FileReader();
        fileReader.onloadend = function(evt){
            loadImageToCan(evt.target.result,175);
        }
        fileReader.readAsDataURL(file_dropped);
        eventHandler(event);
    }

    function eventHandler(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    function loadImageToCan(file,n) {
        var img = new Image();
        can = $("#can")[0];
        var diff = [];
        img.onload = function() {
            can.setAttribute("width", img.naturalWidth);
            can.setAttribute("height", img.naturalHeight);
            can.style.width = img.naturalWidth;
            can.style.height = img.naturalHeight;
            cxt = can.getContext("2d");
            cxt.drawImage(img, 0, 0);
            var imageData = cxt.getImageData(0, 0, can.width, can.height);
            var imgData = imageData.data;
            var l = d = 0;
            for (var i = 0; i < imgData.length; i += 4) {
                var x = (imgData[i] + imgData[i + 1] + imgData[i + 2]) / 3;
                if (x < n) {
                    d++;
                } else {
                    diff.push(i);
                    l++;
                }
            }
            // imgData[i] = 0;
            // imgData[i+1] = 0;
            // imgData[i+2] = 0;
            // cxt.putImageData(imageData,0,0);
            var darkText = false;
            if (l < d) {
                console.log("light text on dark background\nlight : " + l +...

CSS

body{margin:0px;padding:0px;}
/* canvas{width:0px;height:0px;} */
#filesDropArea {
    width:calc(100% - 4px);
    height:300px;
    line-height:300px;
    border:2px solid black;
    text-align:center;
}
.dropping{font-size:30px;border:2px dashed black !important;}
#pixDiff{width:100%;}
#test_can{background:#000;}

JavaScript

$(document).ready(function () {
    $("#filesDropArea").attr({
        "ondragover": "dropping(event);",
        "ondrop": "dropped(event)"
    });
    $("#pixDiff").on("input",function(){
        var diff_val = $(this).val();
        loadImageToCan(undefined,diff_val);
    })
});