Change the color of text depending of background image

Question

I'm in need of a solution to my problem (if there is any):

I want to check the color value of the background image that is behind a div(in my case .picturecenter) then change the color from black to white if the value of the background is dark.

Is this possible?

Here is my site: http://myhrmans.com/hulebild2/ (the text "Welcome" is the target) I have looked at https://github.com/kennethcachia/Background-Check/ already and have not got it to work.

Thankful for any help!

Okey @davidkonrad . Could I manage to do this with any other language? I know php aswell. (and jquary) — myhrmans, Jan 21 '14 at 21:15
http://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript — Callan, Jan 21 '14 at 21:22
possible duplicate of [Dynamically adjust text color based on background image](http://stackoverflow.com/questions/17195738/dynamically-adjust-text-color-based-on-background-image) — cimmanon, Jan 21 '14 at 21:22
yes, use ImageMagick http://www.php.net/manual/en/book.imagick.php. — davidkonrad, Jan 21 '14 at 21:25
Try this: http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image — dpetrova, Jan 21 '14 at 21:37

score 0 · Answer 1 · answered Jan 21 '14 at 21:34

You can pixel read with a canvas element. Check out the function here.

[get average color of image via javascript

You would have to deal with an image element and not a div element with an image background. But you could parse out the image src from the background

var bg = $('.picturecenter').css('background-image')

then just do some substring on the left and right parens to get the url. then get the raw javascript img element.

var imgElement = document.createElement('img');
imgElement.src = bg;

and call the method in the link above.

var colors = getAverageRGB(imgElement);

Then you could average the colors together to see if it's dark enough. something like

var avg = (colors.r + colors.g + colors.b) / 3;
if (avg < 100)
    $('.textcenter').css('color', '#EEE')
else
    $('.textcenter').css('color', '#333')

I put this on my website, but I did not manage to get it to work. I think something is going wrong when pulling the link. It gives me the url(imagelink) istead of imagelink only. Or am I doing something wrong? http://myhrmans.com/hulebild2/ http://myhrmans.com/hulebild2/background.js — myhrmans, Jan 21 '14 at 23:08
That's correct. That's why I was saying you need to do some substring. bg.substring(bg.indexOf('(') + 1, bg.indexOf(')') - 1). That should do the trick. I didn't test it, but it should do the trick. — Callan, Jan 23 '14 at 18:50

Change the color of text depending of background image

1 Answers1