使用 JS 如何检测我悬停的颜色?
Using JS how do i detect a color I'm hovering over?
我正在使用 React,我有这段代码可以在我悬停时准确检测背景颜色,但在使用渐变时它会回复整个 "linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)"
。有没有一种方法可以检测我悬停的任何颜色,就像在使用 js 的开发工具中一样?
const getColor = (div, e) => {
console.log(div, e, e.target, window.getComputedStyle(e.target).getPropertyValue("backgroundImage"))
let color = window.getComputedStyle(e.target).getPropertyValue("background-color");
//let color = window.getComputedStyle(e).getPropertyValue("background-color")
//console.log(color)
setTheme(color)
}
return (
<div className="row">
<div className="col-md-12">
<div className="row">
<div className="col-md-12" onMouseOver={(e) => getColor(this,e)}>
<br />
<div style={{backgroundImage: "linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)"}}>Blue</div>
<div style={{backgroundColor:"red"}}>Red</div>
<div style={{backgroundColor:"yelllow"}}>Yellow</div>
.......
JavaScript 没有关于常规 html 节点的此类信息(除非浏览器扩展是一个选项)。您可以使用 canvas 来处理您正在寻找的内容,您可以在其中处理每个像素。
查看此代码段:http://jsfiddle.net/89wLbh3q/14/
$('#example').mousemove(function(e) {
var pos = findPos(this);
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
var coord = "x=" + x + ", y=" + y;
var c = this.getContext('2d');
var p = c.getImageData(x, y, 1, 1).data;
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
$('#status').html(coord + "<br>" + hex);
});
如果 canvas 不是一个选项,请尝试在隐藏的 canvas 中渲染 CSS 渐变。您还可以使用 html2canvas.
将 html 转换为隐藏的 canvas
我正在使用 React,我有这段代码可以在我悬停时准确检测背景颜色,但在使用渐变时它会回复整个 "linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)"
。有没有一种方法可以检测我悬停的任何颜色,就像在使用 js 的开发工具中一样?
const getColor = (div, e) => {
console.log(div, e, e.target, window.getComputedStyle(e.target).getPropertyValue("backgroundImage"))
let color = window.getComputedStyle(e.target).getPropertyValue("background-color");
//let color = window.getComputedStyle(e).getPropertyValue("background-color")
//console.log(color)
setTheme(color)
}
return (
<div className="row">
<div className="col-md-12">
<div className="row">
<div className="col-md-12" onMouseOver={(e) => getColor(this,e)}>
<br />
<div style={{backgroundImage: "linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)"}}>Blue</div>
<div style={{backgroundColor:"red"}}>Red</div>
<div style={{backgroundColor:"yelllow"}}>Yellow</div>
.......
JavaScript 没有关于常规 html 节点的此类信息(除非浏览器扩展是一个选项)。您可以使用 canvas 来处理您正在寻找的内容,您可以在其中处理每个像素。
查看此代码段:http://jsfiddle.net/89wLbh3q/14/
$('#example').mousemove(function(e) {
var pos = findPos(this);
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
var coord = "x=" + x + ", y=" + y;
var c = this.getContext('2d');
var p = c.getImageData(x, y, 1, 1).data;
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
$('#status').html(coord + "<br>" + hex);
});
如果 canvas 不是一个选项,请尝试在隐藏的 canvas 中渲染 CSS 渐变。您还可以使用 html2canvas.
将 html 转换为隐藏的 canvas