1

I am looking to get the actual displayed color of an area of the screen using Javascript.

I have a system that allows people to restyle their content and they can use RGBA colors, what this means is that while I can very simply test what the background color of an article is (for example) that may not be its actual color because it may be slightly or fully transparent and thus the layer underneath may be showing through...

I have seen various questions on here that deal with getting pixel colors from an image using Javascript, so I am wondering if canvas could be used to achieve this in some way...

What I want is to hide the text in an article, create a (maybe canvas) 'screenshot' of what the article background looks like empty, and then iterate over the pixels in there to get an average color value.

Anyone any ideas on how to do that?

David O'Sullivan
  • 2,969
  • 4
  • 21
  • 24
  • I'd be more inclined to put a click handler on all of the layout elements to return their background colour and then stop propagation of the event. – Klors Aug 01 '14 at 18:31
  • One option: [`document.elementFromPoint`](https://developer.mozilla.org/en-US/docs/Web/API/document.elementFromPoint), hide the found node, repeat (until you hit `document.body`) and do some fancy addition. Another option may be [**here**](http://stackoverflow.com/a/6678156/1615483) – Paul S. Aug 01 '14 at 18:32
  • May be a duplicate of: http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image – Marco Bonelli Aug 01 '14 at 18:35
  • 1
    I dont think this is a duplicate of that as I am explicitly NOT talking about getting the pixel value from an image but from the rendered html elmenents background colours (and background images if set) and what I am after is the resulting merged colours of all these layers when they are staked on top of each other. – David O'Sullivan Aug 01 '14 at 23:17
  • @Paul yep looks like html2Canvas may be an option aswell... – David O'Sullivan Aug 01 '14 at 23:18

1 Answers1

0

You need to get a screenshot of the page using canvas, which is not trivial:

Can you take a "screenshot" of the page using Canvas?

And then getting the colour would be trivial once you have the screenshot.

Community
  • 1
  • 1
Chrissi
  • 349
  • 3
  • 15