Используя JS, как мне определить цвет, над которым я нахожусь? - PullRequest
Новая
       18

Используя JS, как мне определить цвет, над которым я нахожусь?

0 голосов
/ 24 апреля 2019

Я использую реагирование, и у меня есть этот код, который точно определяет цвет фона при наведении курсора, но при использовании градиента он отвечает всем значением "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>
            .......

1 Ответ

1 голос
/ 24 апреля 2019

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

Если холст не является опцией, попробуйте визуализировать CSS-градиент в скрытом холсте. Вы также можете конвертировать html в скрытый холст, используя html2canvas.

...