获取 CSS 背景图像的像素颜色

Question

我需要获取鼠标指针当前悬停的任何像素的颜色。我为 canvas 元素找到了几种解决方案，但是 none 为在 CSS 中为元素定义的背景图像找到了 none。

我怎样才能做到这一点？

Answer 1

结合 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>

出于性能原因，我在鼠标移动函数之外检索了计算样式 (var style = window.getComputedStyle(div);)，但如果背景图像要动态更改，则可能需要将其移动到函数中。

有一些possible browser constraints可以使用getComputedStyle。

缩放您可以尝试编辑代码以调整比例：

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);

这还包括对 CSS 的更改：JSFiddle

获取 CSS 背景图像的像素颜色

Get pixelcolor of CSS Background Image

javascript

css

background

colors

onmouseover