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.

Improve this question
3
  • 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? Commented Jul 9, 2013 at 16:42
  • A client side only HTML5/js solution would be interesting. Commented Jul 9, 2013 at 16:46
  • An interesting thread on how iTunes does this based on the album cover art: stackoverflow.com/questions/13637892/… There's some code examples written in Mathematica, which you could use as a base for your own experimentation. Commented Jul 9, 2013 at 16:48

1 Answer 1

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

How in the world do I get it into Canvas?
stackoverflow.com/questions/6220954/…
@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)
@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).

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.