2

I need to get the color of any pixel my mousepointer is currently hovering. I found several solutions for canvas elements, but none for a background image defined in CSS for a element.

How can I achieve this?

ManuKaracho
  • 1,180
  • 1
  • 14
  • 32
  • What have you tried? Any JS code or examples of something that is not working correctly? – jwatts1980 Jun 23 '15 at 16:22
  • possible duplicate of [How to get a pixel's x,y coordinate color from an image?](http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image) – jwatts1980 Jun 23 '15 at 16:26
  • To get the CSS value of background image, try this: http://stackoverflow.com/a/6338234/579148 Note there are browser compatibility issues with older versions of IE – jwatts1980 Jun 23 '15 at 16:38

1 Answers1

0

Combining the answers from Get a CSS value with JavaScript and How to get a pixel's x,y coordinate color from an image?, I was able to simulate what you are looking for: JSFiddle

<html>
<head>
    <style type="text/css">
        #test {
            background-image: url('http://jsfiddle.net/img/logo.png');
            background-color: blue;
            background-repeat: no-repeat;
            height: 30px;
            width: 100%;
        }

        #hidden {
            display: none;
        }
    </style>
    <script type="text/javascript">
        var div = document.getElementById("test");
        var style = window.getComputedStyle(div);

        div.onmousemove = function(e) {
            var path = style.getPropertyValue('background-image');
            path = path.substring(4, path.length-1);

            var img = document.getElementById("i1");
            img.src = path;

            var canvas = document.getElementById("c1");
            canvas.width = img.width;
            canvas.height = img.height;
            canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

            var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;

            var values = document.getElementById("values");
            values.innerHTML = 'R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3];
        };
    </script>
</head>
<body>
    <div id="test"></div>
    <div id="hidden">
        <img id="i1" src="" />
        <canvas id="c1"></canvas>
    </div>
    <div id="values"></div>
</body>
</html>

I retrieved the computed style (var style = window.getComputedStyle(div);) outside of the mouse move function for performance reasons, but if the background image is going to change dynamically, then it may need to be moved into the function.

There are some possible browser constraints for using getComputedStyle.

SCALING You could try editing the code to adjust for the scale:

var h = parseInt(style.getPropertyValue("width")), 
    w = parseInt(style.getPropertyValue("height"));

var img = document.getElementById("i1");
img.src = path;

var canvas = document.getElementById("c1");
canvas.width = h;
canvas.height = w;
canvas.getContext('2d').drawImage(img, 0, 0, w, h);

This also includes a change to the CSS: JSFiddle

Community
  • 1
  • 1
jwatts1980
  • 7,254
  • 2
  • 28
  • 44
  • this is great! I'm using the images as background images, because of the advantages of scaling different images to the size of my preview div (fixed size). When the image gets scaled, your approach does not work properly anymore. I tried to move the computed style into the mouse move function, but I was not lucky.. do you have any hint in the right direction for me? – ManuKaracho Jun 23 '15 at 18:32
  • @user2556555 I made an edit that accounts for some scaling. You could give that a try. – jwatts1980 Jun 23 '15 at 20:47
  • The [fiddle](http://jsfiddle.net/g54h3ewn/1/) doesn't work for me. On mouseover it just says color 0,0,0 everywhere – ashleedawg Oct 30 '20 at 02:36
  • @ashleedawg interesting. I haven't looked at this post in 5 years. There's a ton of errors in the console.. something about trying to load a resource that's missing. I'll try to remember to come back over here when I have time to troubleshoot it. – jwatts1980 Oct 31 '20 at 03:01