2017-05-06 144 views
0

另一個更新我找到了使用https://github.com/lokesh/color-thief,like @Ivan Arambula建議獲取圖像RGB的方法。根據滑塊圖像的色調更改菜單顏色

現在我試圖比較顏色的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(沒有運氣)

如果你能告訴我最好的TECHNIC或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 

回答

0

使用顏色賊這樣的事情可能會奏效。

$(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 
    }) 
}); 
+0

我已經嘗試了代碼,但它鎖定的滑動,我不得不將類更改爲圖像標記,滑動作品的ID,但顏色不,謝謝 –

+0

我更新的問題,我寫了我添加的代碼,但仍然沒有工作@Ivan Arambula –

+0

你是否在控制檯中發現任何錯誤? –