1

I came upon a pondering question for you all! How in the world could you take text and using JavaScript, make the text a color based on an image. Lets say you have a Metallic.png image created in photoshop. The file is a reddish metallic and you want that to become your text color based on the pixel colors in the file.

I heard of http://users7.jabry.com/overlord/mug.html - which will color an image based on a solid color defined. But I have never come across anything that can color text based on a image file(I only say image file because, in an image file you could create a metallic or whatever swatch)

Is this even possible at the moment? Couldn't you just add a file source link to the text as you do with the background: url...? What are your ideas?

David

UPDATE:

On a normal server, PHP technology, JavaScript, etc.. I would hope it works on all browsers.

David Biga
  • 2,763
  • 8
  • 38
  • 61
  • Any assumptions on browsers or server technologies? Like are you expecting this to work in IE7? And do you have a server like ASP.NET or PHP? – Joe Enos Jul 09 '13 at 16:42
  • A client side only HTML5/js solution would be interesting. – Justin L. Jul 09 '13 at 16:46
  • An interesting thread on how iTunes does this based on the album cover art: http://stackoverflow.com/questions/13637892/how-does-the-algorithm-to-color-the-song-list-in-itunes-11-work There's some code examples written in Mathematica, which you could use as a base for your own experimentation. – M Sost Jul 09 '13 at 16:48

1 Answers1

2

You need to import the image into Canvas, then use Canvas to inspect the bitmap and figure out colors from there.

See: use canvas and javascript to read the pixel colors of an image

Community
  • 1
  • 1
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • How in the world do I get it into Canvas? – David Biga Jul 09 '13 at 16:47
  • http://stackoverflow.com/questions/6220954/how-do-i-draw-an-image-loaded-from-the-page-in-a-canvas – Diodeus - James MacFarlane Jul 09 '13 at 16:49
  • @DavidBiga Since you edited your question to show that you're hoping to get a solution across all browsers, keep in mind that the canvas is not available in IE8. (at least natively - looks like there are [alternatives](http://stackoverflow.com/questions/1332501/how-can-i-use-the-html5-canvas-element-in-ie)) – Joe Enos Jul 09 '13 at 16:57
  • @Joe the exCanvas does unfortunately not support pixel manipulation nor composite modes which is needed to do this (I had a hard time achieving simple text too IIRC when I tested this a while back). –  Jul 09 '13 at 17:04