试图基于亮或暗图像更改图库上的徽标？

Question

我在使用此插件的主页上有一个图片库：

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

我的客户希望对较暗的图像使用较浅的徽标，对较浅的图像使用较暗的徽标。 我对jQuery非常满意，但是从来不需要做这样的事情。

这是他们正在寻找的效果：

http://www.aplusi.com/

我知道在此站点上，他们正在向身体添加一个类（深色幻灯片），然后使用一个更具体的类：

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

使徽标从黑色变为白色。 我唯一的问题是我不知道他们是如何做它，因为它也有自己的刷卡功能的工作原理也是如此。 我已经研究了他们的JS，但似乎找不到代码。

我有一些想法，例如在箭头上单击处理程序以检查显示的图像，然后添加必要的类。 唯一的问题是图库具有滑动功能，而jQuery没有触摸事件的事件处理程序。

我的另一个想法是要有一个间隔计时器，然后在适当的时间将该类添加到必要的图像上-这是我尚未做过的事情，也不知道从哪里开始。

我认为这应该相当容易，但是我似乎无法提出一个体面的解决方案，因此我想问一下。

任何帮助将不胜感激。

Answer 1

不幸的是，他们的JavaScript被混淆了，但是您正在寻找的代码是这样的（有趣的是，似乎缺少了分号）：

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

“ data-top-right-color”是在每张幻灯片上分别设置的属性。 每次幻灯片更改时，包含以上代码的函数都会触发并检查该data- Attribute以查看是否应添加“ dark-slide”类以使徽标字体变为白色。

Answer 2

必须有一个活动图像容器。 要根据滑块中的图像更改徽标，您有2个选项：

在img标签中维护一些属性，以便您可以根据属性的值进行区分。 例如。 <img src='image.png' data-value='dark'>
如果您无法维持属性，那么一个复杂的解决方案将是写一个算法中，以确定活动图像的类型使用Canvas

更改徽标：

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

Answer 3

您可以使用以下代码来完成它。 它使用画布来处理图像。 该概念基于使用原始图像的灰度版本检测图像是暗还是亮的。

这是一个基于div背景颜色的工作版本。 如果要使用图像作为背景，请在此处参考我的代码。 我已经上传了带有背景图片的样本。 由于跨源问题，我无法制作小提琴或在线演示。

简单的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>

试图基于亮或暗图像更改图库上的徽标？

问题描述

3 个解决方案

解决方案1
0 2015-09-05 05:24:26

解决方案2
0 2015-09-05 05:27:28

解决方案3
0 2015-09-05 17:48:26

试图基于亮或暗图像更改图库上的徽标？

问题描述

3 个解决方案

解决方案1 0 2015-09-05 05:24:26

解决方案2 0 2015-09-05 05:27:28

解决方案3 0 2015-09-05 17:48:26

解决方案1
0 2015-09-05 05:24:26

解决方案2
0 2015-09-05 05:27:28

解决方案3
0 2015-09-05 17:48:26