JSFiddle - React, Tailwind, and code Playground

by Bryson Murray

HTML

<img src='data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCABgAGADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDxHcdu3tnNJk+tAJGffikoAXJoz70UZoGGTRn3oo70CDNFBOWJwBk9BSsBuO0kj3FADaWlVc55HTPJpDQAUlPkPRQ5ZQOM9qZQAtLRilyNoGOc9c0DAYB5GR6U3NLRigAFFLSsrIcMMEjNAhuKO9StEPl2NuyMnjofSp7fTbi6bbFGSaAuU6URswyAcetbn9hiEGR33qvX0J9KpXEpSMxcAZz/APWp27iv2M8jmil6mikMUjBxQQRjIPNJmjOaAFXbn5gce1OduNin5ASRkc0ynRpvcA8DPJFACBSxwK1dO0W4vpAqITn2rT8PeHn1G5UAfLnqa9q8M6ZoukRjEZvLoD7kQ4B9yeKbtHczcm9EcToPwrubpFmuUKR9Tnjirmq2mmaHbNb24jLgYLYr0DxBrhWzKzypbw4/1MJ5P1NeJeJNeikldbdQo9e9EJNktamVqupoPkQdOg7fWuakkMjkk9afcTGRiSahldW2bI9mFAPJO4+tDdzSKsFLmmg8U5lIUEggHofWkUFFFHU0AOMbh9hU7vStOxswWUscn0FUo2CcDBz611Hh/wDsU280up3xhZQPLVVySaa3Jlc39FSG3Cm5k/dDqgOB+NbE/jS002Fo7ONE7ZA6151q+qQC722jsYsAk561iS3TyE8k03Z7kqLOo1rxXdak7fOxHWuVlnaRiSafbC2klb7XLLGmxipjQMS2OAQSOM96ji8olvNLgbTt2gH5u2fapv0KUbER5puKcaSgoO1BYkAEnA6UdaSgY+inttwNoIOOcmmUCFyaTNOXbu+cEr7HFMoAeSFKlGJOOeMYNMzS4OM4OM4zSxxvNIscaM8jnaqqMkn0FAxuaM0MCrFSCCDyD2pKAA0UUmaQiWGaSCTzImKvgjI9xg1GScnPWnIjlGkCOUXqwHAPbNISWJJOSepNMY4nmngs8ezKhVy3OBUdFAgpKM0ZoANx27cnGc4pASDkcGg0UDCiiikIKaetOpCM0wASOqMgdgjdVB4NOR2UMAfvDBpmKeAT0GaAP//Z'/>

<img...

JavaScript

function isItDark(imageSrc,callback) {
        var fuzzy = 0.1;
        var img = document.createElement("img");
        img.src = imageSrc;
        img.style.display = "none";
        document.body.appendChild(img);

        img.onload = function() {
            // create canvas
            var canvas = document.createElement("canvas");
            canvas.width = this.width;
            canvas.height = this.height;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(this,0,0);

            var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
            var data = imageData.data;
            var r,g,b, max_rgb;
            var light = 0, dark = 0;

            for(var x = 0, len = data.length; x < len; x+=4) {
                r = data[x];
                g = data[x+1];
                b = data[x+2];

                max_rgb = Math.max(Math.max(r, g), b);
                if (max_rgb < 128)
                    dark++;
                else
                    light++;
            }

            var dl_diff = ((light - dark) / (this.width*this.height));
            if (dl_diff + fuzzy < 0)
                callback(true); /* Dark. */
            else
                callback(false);  /* Not dark. */
        }
    }


/// debug code
    
var imgs = document.body.getElementsByTagName('img');

for(var x = 0; x < imgs.length; x++) {
    imgs[x].onclick = function() {
        isItDark(this.src,function(darkornot) {
            document.getElementsByTagName('pre')[0].innerHTML = "Dark ? " + darkornot;
        });            
    }
}