試圖根據光照或黑暗圖像更改圖像庫上的徽標？

http://codecanyon.net/item/jquery-slider-zoom-inout-effect-fully-responsive/2457203

我的客戶希望有較暗的圖像較亮的標誌和較輕的圖像較暗的標誌。我對jQuery很滿意，但從未做過這樣的事情。

這就是他們要找的效果：

http://www.aplusi.com/

我知道這個網站，他們增加一個類（暗幻燈片）的身體，然後用更具體的類：

.dark-slide #logo { 
    color: #fff; 
}

使徽標從黑色變爲白色。我唯一的問題是我不知道他們如何做，因爲它也可以與他們的滑動功能一起工作。我已經挖掘到他們的JS，但似乎無法找到代碼。

我有一些想法，例如在箭頭上點擊處理程序來檢查呈現的圖像，然後添加必要的類。唯一的問題是，畫廊有一個滑動功能，jQuery沒有觸摸事件的事件處理程序。

我的另一個想法是有一個間隔計時器，然後在正確的時間將該類添加到必要的圖像 - 這是我沒有做的事情，不知道從哪裏開始。

我在想這應該相當容易，但我似乎無法想出一個體面的解決方案，所以我想我會問。

任何幫助將不勝感激。

來源

2015-09-05 Dade

其JavaScript不幸混淆，但你正在尋找的代碼是這樣的（這有趣的是似乎缺少分號）：

var u = e.Color.getBrightness(o.getAttribute("data-top-right-color"));  
e.one(document.body).toggleClass("dark-slide", u < 35)

「數據右上色」是一個屬性在每張幻燈片上單獨設置。每當幻燈片發生變化時，包含上述代碼的函數就會觸發並檢查屬性是否應添加「dark-slide」類以使徽標字體變爲白色。

來源

2015-09-05 05:24:26 Scott

必須有一個活動圖像的容器。要更改標誌按在滑塊圖像prsent，你有兩個選擇：

保持在img標記某個屬性，這樣就可以按照屬性的值diffrentiate。例如。 <img src='image.png' data-value='dark'>
如果無法維持屬性，那麼一個複雜的解決方案將是寫一個算法中，以確定活動圖像的類型使用Canvas

更改標誌：

var logoImg=$('#logo'); 
if(activeImgType=='dark') 
{ 
    logoImg.attr('light.png'); 
}else{ 
    logoImg.attr('dark.png'); 
}

來源

2015-09-05 05:27:28 Rayon

您可以使用下面的代碼來完成它。它使用畫布來處理圖像。該概念基於使用原始圖像的灰度版本檢測圖像是黑暗還是光線。

這是根據div的背景顏色工作version。如果你想使用圖像作爲背景，請參考我的代碼here。我已經上傳了一張帶有背景圖片的樣本。由於交叉來源問題，我無法制作小提琴或在線演示。

簡單RGB背景的代碼如下：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Dynamic text color demo using canvas</title> 
</head> 
<body> 
    <label><b>Image with text</b></label> 
    <div id="content" style="box-shadow:0px 0px 1px #000;width:200px;height:100px;background-color:#333;"> 
    <b style="z-index:2;position:absolute;color:black !important;">BLACK Text</b> 

    <br><b style="z-index:2;position:absolute;color:white !important;">WHITE Text</b> 
    <br><b style="z-index:2;position:absolute;color:rgb(127,127,127) !important;">GRAY Text</b> 
    <br><b style="z-index:2;position:absolute">CORRECTED COLOR</b> 
    </div><br><br> 
    <label><b>Variables</b></label> 
    <div id="height"> 

    </div> 
    <div id="width"> 
    </div> 
    <div id="dataLength"> 

    </div> 
    <div id="blackCount"> 

    </div> 
    <br> 
    <label><b>Canvas for grayscale</b></label><br> 
    <canvas id="myCanvas" width="200px" height="100px" style="box-shadow:0px 0px 1px #000"></canvas> 
     <script> 

      /* ~~~~~ This function loops over various images ~~~~~ */ 
      var c=0; 
      var color; 
      function loop(){ 
       c++; 
       document.getElementById('content').style.backgroundColor='rgb('+(c*29)%255+','+(c*29)%255+','+(c*29)%255+')'; 
       var imageObj = new Image(); 
       imageObj.onload = function() { 
       drawImage(color); 
      } 

      color=document.getElementById('content').style.backgroundColor; 
      var canvas = document.getElementById('myCanvas'); 
      var context = canvas.getContext('2d'); 
      context.clearRect(0, 0, canvas.width, canvas.height); 
      var x = 0; 
      var y = 0; 

      context.rect(0,0,canvas.width, canvas.height); 
      context.fillStyle='rgb('+(c*29)%255+','+(c*29)%255+','+(c*29)%255+')'; 
      context.fill(); 

      /* ~~~~~ Print height and widht of image ~~~~~ */ 
      document.getElementById('height').innerHTML="height: "+imageObj.height; 
      document.getElementById('width').innerHTML="width: "+imageObj.width; 
      /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 

      var imageData = context.getImageData(x, y, canvas.width, canvas.height); 
      var data = imageData.data; 

      /* ~~~~~ This part converts the image to grayscale ~~~~~ */ 
       for(var i = 0; i < data.length; i += 4) { 
       var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]; 
       // red 
       data[i] = brightness; 
       // green 
       data[i + 1] = brightness; 
       // blue 
       data[i + 2] = brightness; 
       } 
      /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 

      /* ~~~~~ This part counts the number of dark pixels ~~~~~ */ 
      var count=0; 
      for(var j=0;j<data.length;j+=4){ 
       if(data[j]<200 && data[j+1]<200 && data[j+2]<200){ 
       count+=4; 
      } 
     } 
     /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 

     /* ~~~~~ If the number of dark pixels are 80% of total pixels, then assume image to be dark ~~~~~ */ 
     if(count>=(data.length*0.8)){ 
      document.getElementById('content').style.color="white"; 
     }else{ 
      document.getElementById('content').style.color="black"; 
     } 
     /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 

     /* ~~~~~ Print total pixel and counted dark pixels ~~~~~ */ 
     document.getElementById('dataLength').innerHTML ="Data length"+data.length+" Data length/2 "+(data.length/2); 
     document.getElementById('blackCount').innerHTML ="Black Count"+count; 
     /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 

     // Draw grayscale image on cavas 
     context.putImageData(imageData, x, y); 

    } 
    setInterval(loop,2000); 

    </script> 

</body> 
</html>

來源

2015-09-05 17:48:26

試圖根據光照或黑暗圖像更改圖像庫上的徽標？

回答

相關問題