获取 CSS 背景图像的 pixelcolor [英] Get pixelcolor of CSS Background Image
问题描述
我需要获取鼠标指针当前悬停的任何像素的颜色.我找到了几种画布元素的解决方案，但没有找到在 CSS 中为元素定义的背景图像.
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?
推荐答案
结合来自 使用 JavaScript 获取 CSS 值 和 如何从图像中获取像素的 x,y 坐标颜色?，我能够模拟您正在寻找的内容:JSFiddle
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>
出于性能原因，我在鼠标移动函数之外检索了计算样式 (var style = window.getComputedStyle(div);)，但是如果背景图像要动态更改，那么它可能需要移到函数中.
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.
对于使用 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);
这还包括对 CSS 的更改:JSFiddle
This also includes a change to the CSS: JSFiddle
这篇关于获取 CSS 背景图像的 pixelcolor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
