3

You can sample pixel color data on a canvas image with getImageData(). If I layer a transparent canvas element over a background image or flash movie, can I sample a color from that via the canvas tag?

Geuis
  • 41,122
  • 56
  • 157
  • 219
  • This question is possibly relevant (and I'm trying to solve the same problem): http://stackoverflow.com/questions/2754865/how-to-get-the-rgb-value-of-an-image-in-a-page-using-javascript – Anderson Green Jul 17 '12 at 21:14

2 Answers2

5

Phil's right, you can't do it. Canvas, by design, only returns its own intrinsic pixel data, not any on-screen rendered content originating from other elements.

You could make a canvas element that covers the entire page and captures an image of the rendered screen.

If possible, that would be a cross-site-scripting security hole. You could iframe a target site (leveraging the users cookies/authentication/intranet to access it), then suck out the content from it pixel by pixel.

bobince
  • 528,062
  • 107
  • 651
  • 834
2

I think not. You would get the colour of the canvas at that point. I did find the method document.defaultview.getComputedStyle(element,pseudoElt), but on a 1 pixel div with no background-color, it returned 'transparent'.

So, unfortunately, this may be impossible at present. What is your higher-level aim? We may be able to come up with an alternative route.

"I had an idea earlier to copy image data into a javascript object. You could make a canvas element that covers the entire page and captures an image of the rendered screen. Once you have that data, you could do real-world cross browser testing, perhaps."

If you don't mind that it's a static image, there is a great website that does this for you: Browser Shots. It generates screenshots of your website running in a huge range of different browsers.

Phil H
  • 19,928
  • 7
  • 68
  • 105
  • I had an idea earlier to copy image data into a javascript object. You could make a canvas element that covers the entire page and captures an image of the rendered screen. Once you have that data, you could do real-world cross browser testing, perhaps. – Geuis Mar 25 '09 at 10:59
  • I've added a note to the answer about the browsershots website, which should do what you're thinking in a nice, simple fashion. – Phil H Mar 25 '09 at 12:03