JSFiddle - React, Tailwind, and code Playground

by pseudosavant

HTML

<img src="http://ycombinator.com/favicon.ico" id="icon">
<div id="holder"></div>
<h1 id="color"></h1>

JavaScript

Raphael(function () {
    var img = document.getElementById("icon");
    // img.style.display = "none";
    var r = Raphael("holder", 16, 16);

    r.image(img.src, 0, 0, 16, 16);
    
    var c = "", pixels= [];
    for (var i=0; i < 256; i++) {
        pixels.push(Raphael.getRGB(Raphael.getColor(1)));
    }
    
    var p, sumOfColors = {r: 0, g: 0, b: 0}, averageColor = {r: 0, g: 0, b: 0};
    for (var i = 0, l = pixels.length; i < l; i++){
        p = pixels[i];
        sumOfColors.r += p.r;
        sumOfColors.g += p.g;
        sumOfColors.b += p.b;
    }
    averageColor.r = sumOfColors.r / l;
    averageColor.g = sumOfColors.g / l;
    averageColor.b = sumOfColors.b / l;
    
    var e = document.getElementById("color");
    e.innerHTML = averageColor.r +", "+averageColor.g +", "+averageColor.b;
    e.style.backgroundColor = Raphael.rgb(averageColor.r, averageColor.g, averageColor.b);
});