0

How can one use .getImageData() to get the data from the background-image of a given element? Project is already using jQuery, so jQuery solutions welcome.

Bas van Dijk
  • 9,933
  • 10
  • 55
  • 91
z t
  • 133
  • 1
  • 1
  • 9

1 Answers1

2

The getImageData method will give you the image data from a canvas element only (so this has nothing to do with the css background-image property)

That said, you will be able to use element.style.backgroundImage to get the background image from the element, and then work from there... if you're running the js on the same domain as the image, you'll be able to paint it to a new canvas, and run getImageData from there.

Tim
  • 5,732
  • 2
  • 27
  • 35
  • maybe i should rephrase the problem in use context: I'd like to be able to get a read on the dominant colors in a background image behind a div, to have an idea of what to set the type color to in order to contrast with the background. A plugin to this effect exists, but specifically works with elements ( http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/ ) where the trick appears to be the extraction of the image data as a data uri and using that to reconstruct the image on a canvas for computation purposes. I'd like to do the same with background-image of an element... – z t Dec 22 '13 at 04:13