Javascript 使用JS如何检测颜色i'；我在上空徘徊？

我使用的是react，我有一个代码，当我悬停时，它可以准确地检测背景颜色，但当使用渐变时，它会以整个

“线性渐变（向右，红色，橙色，黄色，绿色，蓝色，靛蓝色，紫色）”

。有没有一种方法可以像在使用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>
            .......

const getColor=（div，e）=>{
log（div，e，e.target，window.getComputedStyle（e.target）.getPropertyValue（“backgroundImage”））
让color=window.getComputedStyle（e.target.getPropertyValue（“背景色”）；
//let color=window.getComputedStyle（e）.getPropertyValue（“背景色”）
//console.log（彩色）
设置主题（颜色）
}
返回(
getColor（this，e）}>


蓝色
红色
黄色的
.......

JavaScript没有关于常规html节点的此类信息（除非浏览器扩展是一个选项）。您可以使用画布完成查找，在画布上可以处理每个像素

签出此代码段：

$（“#示例”）.mousemove（函数（e）{
var pos=findPos（本）；
var x=e.pageX-位置x；
变量y=e.pageY-位置y；
var coord=“x=”+x+”，y=“+y；
var c=this.getContext（'2d'）；
var p=c.getImageData（x，y，1，1）；
var hex=“#”+（“000000”+rgbToHex（p[0]，p[1]，p[2]）。切片（-6）；
$（'#status'）.html（坐标+“
”+hex）；
});

如果画布不是选项，请尝试在隐藏画布中呈现CSS渐变。您还可以使用

$('#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);
});