Question

另一项更新我找到了一种使用https://github.com/lokesh/color-thief,like获取图像RGB的方法@Ivan Arambula建议。

现在我试图将颜色的RGB与白色和黑色的RGB进行比较，然后根据结果更改菜单颜色我使用来自@cyang答案的答案中的代码但我有以下错误

(index):240 Uncaught TypeError: Cannot read property 'substr' of undefined
    at getContrastYIQ ((index):240)
    at HTMLElement.<anonymous> ((index):247)
    at HTMLElement.dispatch (jquery-3.2.1.min.js:3)
    at HTMLElement.q.handle (jquery-3.2.1.min.js:3)
    at Object.trigger (jquery-3.2.1.min.js:4)
    at HTMLElement.<anonymous> (jquery-3.2.1.min.js:4)
    at Function.each (jquery-3.2.1.min.js:2)
    at r.fn.init.each (jquery-3.2.1.min.js:2)
    at r.fn.init.trigger (jquery-3.2.1.min.js:4)
    at $.Unslider.self.animate (unslider.js:439)

JS代码

<script type="text/javascript">

$(function() {
  var colorThief = new ColorThief();
  var slider = $('.my-slider').unslider();
  slider.on('unslider.change', function(event, index, slide) {
    image = slide.find('img')[0];
    color = colorThief.getColor(image,5);

    // color logic here
    function getContrastYIQ(color){
      var r = parseInt(color.substr(0,2),16);
      var g = parseInt(color.substr(2,2),16);
      var b = parseInt(color.substr(4,2),16);
      var yiq = ((r*299)+(g*587)+(b*114))/1000;
      return yiq ;
    }

    var colors = getContrastYIQ();
    if (colors >= 128) {
      $('.marker').css('color', 'black');
    }else {
      $('.marker').css('color', 'white');
    }
  })
});

</script>

我的原始问题

我使用一个非常简单的jQuery滑块创建了一个滑块。 [http://idiot.github.io/unslider/][1]。我有一个固定的汉堡菜单，我想根据图像的色调改变颜色（白色和蓝色），我搜索了很多，我找不到解决方案，我到现在使用的图书馆是 https://github.com/kennethcachia/background-check（有了这个，我成功地改变了颜色，但只是滚动而不是滑动而且它不会切换到另一种颜色）。 https://github.com/jamiebrittain/colourBrightness.js（没有运气）
https://github.com/lokesh/color-thief（没有运气）

如果你能告诉我最好的技术或js库，那就太棒了

我正在使用laravel 5.4

我的标题代码是

    <header>
      <div class="logo">
          <h3>Petronius 1926</h3>
      </div>
    </header>

    <!-- menu -->
      <button type="button" class="navbar-toggle js-navToggleButton is-open">
        <span class="icon-bar icon-bar--first"></span>
        <span class="icon-bar icon-bar--middle"></span>
        <span class="icon-bar icon-bar--second"></span>
        <span class="navbar-toggleTitle">Menu</span>
      </button>
      <span class="marker-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
      <span class="marker"><i class="fa fa-square" aria-hidden="true"></i></span>
      <span class="marker-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span>

      <nav class="pushy pushy-left">

        <div class="pushy-content">

          <div class="diamond">
            <button type="button" class="navbar-toggle navbar-toggle--innerNav js-navToggleButton close">
              <span class="icon-bar icon-bar--first"></span>
              <span class="icon-bar icon-bar--middle"></span>
              <span class="icon-bar icon-bar--second"></span>
            </button>
          </div>

          <span class="navbar-toggleTitle">Menu</span>
          <div class="marker-inner outer"><i class="fa fa-square" aria-hidden="true"></i></div>

          <ul>
              <li class="pushy-link"><a href="#home" class="navbar-nav-links-item-link">Home</a></li>
              <li class="pushy-link"><a href="#about-us" class="navbar-nav-links-item-link">Who we are</a></li>
              <li class="pushy-link"><a href="#story" class="navbar-nav-links-item-link">How is it made</a></li>
              <li class="pushy-link"><a href="#collection" class="navbar-nav-links-item-link">Collection</a></li>
              <li class="pushy-link"><a href="#contact" class="navbar-nav-links-item-link">Contact</a></li>
          </ul>
          <div class="marker-inner inverse"><i class="fa fa-square" aria-hidden="true"></i></div>

      </div>
    </nav>
    <div class="site-overlay"></div>

My home page code is 

    @extends('layouts.master')

    @section('styles')
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/unslider.css">
    <link rel="stylesheet" href="/css/unslider-dots.css">
    @endsection

    @section('title')
      Home Page
    @endsection

    @section('content')
    <div id="fullpage" class="fullpage-wrapper">
      <section id="home" class="my-slider">
        <ul>
          @foreach( $gallery as $image )
            <li><img id="slider-image" src="{!! '/images/'.$image->image !!}" alt="Home page image slider"></li>
          @endforeach
        </ul>
      </section>

    </div>

    @endsection

    @section('scripts')
    <!-- Slider -->
    <script src="js/unslider.js"></script>
    <script src="js/script.js"></script>
  $(function() {
      var colorThief = new ColorThief();
      var slider = $('.my-slider').unslider();
      slider.on('unslider.change', function(event, index, slide) {
        image = slide.find('img')[0];
        color = colorThief.getColor(image,5);

        // color logic here
        function getContrastYIQ(color){
          var r = parseInt(color.substr(0,2),16);
          var g = parseInt(color.substr(2,2),16);
          var b = parseInt(color.substr(4,2),16);
          var yiq = ((r*299)+(g*587)+(b*114))/1000;
          return yiq ;
        }

        var colors = getContrastYIQ();
        if (colors >= 128) {
          $('.marker').css('color', 'black');
        }else {
          $('.marker').css('color', 'white');
        }


    </script>

    @endsection

Answer 1

使用Color Thief可能会有这样的效果。

$(function() {
  var colorThief = new ColorThief();
  var slider = $('.my-slider').unslider();
  slider.on('unslider.change', function(event, index, slide) {
    image = slide.find('img')[0];
    color = colorThief.getColor(image);

    // color logic here
  })
});

根据滑块图像的色调更改菜单颜色

1 个答案: