Canvas text color

by Louis Walch

HTML

<div class="item">
		<div class="text">This is some text</div>
		<div class="info">
			<p>Image Sample Area:</p>
			<canvas> </canvas>
			<p>Average Color:</p>
        	<div class="color"></div>
        </div>
        <div class="tinted1">
			<canvas> </canvas>
        </div>
        <div class="tinted2">
			<canvas> </canvas>
        </div>
		<img width="372" height="372"...

CSS

* { margin: 0; padding: 0 }

BODY { padding: 30px; }

.item {
    position: relative;
    }
.item .info {
    width: 250px;
    position: absolute;
    top: 0;
    left: 380px; 
    }
.item .info P {
    font-weight: bold;
    font-family: Arial;
    font-size: 10px;
    margin-bottom: 5px;
    }
.item .info CANVAS,
.item .info .color {
    width: 250px;
    height: 50px;
    margin-bottom: 5px;
    }
.item .text {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    }
.item .tinted1 {
    width: 372px;
    height: 372px;
    position: absolute;
    top: 0;
    left: 640px; 
    background-color: #eaeaea;
    }
.item .tinted2 {
    width: 372px;
    height: 372px;
    position: absolute;
    top: 0;
    left: 1019px; 
    background-color: #eaeaea;
    }

JavaScript

var getRGB = function(data, block_size) {

	var block_size 	= block_size || 4;
    var length 		= data.data.length;
    var rgb			= {r:0,g:0,b:0};
    var i 			= -4;
    var count		= 0;
    var length;

    if (length < 1) return rgb;
    
    while ( (i += block_size * 4) < length ) {
        ++count;
        rgb.r += data.data[i];
        rgb.g += data.data[i+1];
        rgb.b += data.data[i+2];
    }
    
    rgb.r = Math.floor(rgb.r/count);
    rgb.g = Math.floor(rgb.g/count);
    rgb.b = Math.floor(rgb.b/count);

    return rgb;

};

var getTextColor = function(r,g,b,threshold) {
	
	var threshold 	= threshold || 130;
    var brightness 	= (r*0.299 + g*0.587 + b*0.114);

    var white 		= '#fff';            
    var black 		= '#000';

    return (brightness > threshold) ? black : white;

};


$('.item').each(function() {

    var img     = $(this).find('IMG')[0];
    var txt     = $(this).find('.text');
    var color   = $(this).find('.color');

    var c       = $(this).find('CANVAS')[0];
    var ctx     = c.getContext('2d');
    var w       = 250;
    var h       = 50;
    
    ctx.drawImage(img, 0, 0);

    try {
        data = ctx.getImageData(0, 0, w, h);
    } catch(e) {
        /* security error, img on diff domain */
        return;
    }

    var rgb 		= getRGB(data, 2);
    var txt_color	= getTextColor(rgb.r, rgb.g, rgb.b);

    color.css({backgroundColor: 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')'});
    txt.css({color: txt_color});    

});