9

My initial searching indicates that for security reasons I might not be able to do this, but I'll ask anyway. How can I get the color of any specified pixel on a web page?
To be more specific, this is my own web page which contains background-color, images, css-modified-elements. I need to know the color of a specific pixel on the fully rendered web page. The info can't be from a screen-grab, because I want to modify my fully rendered page.

Ouch !!! Did someone really “minus 1” me for asking genuine question? Tough crowd!

To be more specific: I want to add a user-moveable canvas element to the web page that visually alters the part of the web page that the canvas is hovering over. Think of the canvas element as a magnifying glass that the user can move across the web page. But the actual effect I want the canvas element to produce is a color-filter (hence the need for the underlying colors).

6
  • @Oded: [minus 1] that's a quip, not even an attempted answer...
    – markE
    Jan 7, 2013 at 19:24
  • 5
    That's why it is a comment. You need to be much more explicit in your question.
    – Oded
    Jan 7, 2013 at 19:25
  • 1
    While everyone argues below can you fill in a piece of missing information. Are there any browser constraints and does this need to be able to be done programmatically?
    – War10ck
    Jan 7, 2013 at 19:35
  • Ok, thanks Oded--In that case, I appreciate your help! To be more specific, I want to add a user-moveable canvas element to the web page that visually alters the part of the web page that the canvas is hovering over. Think of the canvas element as a magnifying glass that the user can move across the web page. But the actual effect I want the canvas element to produce is a color-filter (hence the need for the underlying colors).
    – markE
    Jan 7, 2013 at 19:45
  • How is that different from a semi-transparent div with a background color?
    – Andrew
    Jan 7, 2013 at 21:16

3 Answers 3

2

Can't be done w/ script+tricks. Maybe via a plugin

If you can set up a server-side browser to render pages for you - that might work.

4
  • Hi Scott. Yes, I need to use javascript rather than screen-grab because I want to modify the web page after reading the color
    – markE
    Jan 7, 2013 at 19:21
  • hey markE - w/o knowing more about what you're doing best I can offer is some kind of server-side browser-rendering service w/ pixel-lookup feature .. Jan 7, 2013 at 19:38
  • Thanks to both you and Peter. I'm accepting "cant be done" as the correct answer.
    – markE
    Jan 7, 2013 at 20:17
  • Just an update to my noob question here. This answer is still correct as of this date (Nov-2014). I would add that we eventually solved our dilemma by scraping the html+css for the page and sending it to PhantomJS on the server to generate an image that we used to get pixel data.
    – markE
    Nov 13, 2014 at 17:52
2

https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en

Ok a few more details here....

With Chrome plug in you can load up your page, and use the little dropper tool to select a segment of the page that you are interested in finding out the color. It's straight forward, but to your "Edit" its sort of screen scraping. Not sure if you can or can't use chrome.

If you can't use a plug-in, do you have the ability to select the html element via right click?

8
  • 1
    This is an extension for chrome. Not a real answer.
    – Peter
    Jan 7, 2013 at 19:15
  • It's not a real answer, tell me how to use to your solution on firefox i'll give you +1
    – Peter
    Jan 7, 2013 at 19:28
  • there was no constraint to use firefox? you're constraints up.
    – amarkson
    Jan 7, 2013 at 19:31
  • @amarkson if we talk about HTML/JS/CSS i believe it should work on all browsers. Your answer is great comment, not answer.
    – Peter
    Jan 7, 2013 at 19:33
  • That's not a constraint...its an option for an arbitrary broweser..they also didn'y say lynx.
    – amarkson
    Jan 7, 2013 at 19:33
2

You could use the html2canvas library to rerender your webpage to a canvas whenever your DOM updates, then grab the pixel information from the canvas.

However, it sounds like what you're trying to achieve might be possible to do with css filters. Here's a demo of what css filters can do. You would need to render two layers with the same HTML, where the top layer has the filter applied to it and is cropped to cover only the desired area.

1
  • html2canvas worked great for me! now trying to get this to work in a firefox addon... and its failing silently, any ideas? i'm using the firefox jpm-sdk
    – Nick Briz
    Aug 18, 2016 at 21:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.