获取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.
我该如何实现?
推荐答案
结合使用JavaScript获取CSS值和 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 您可以尝试编辑代码以调整比例:
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屋！
