Javascript 正在尝试根据明暗图像更改图像库上的徽标？_Javascript_Jquery_Html_Css

Javascript 正在尝试根据明暗图像更改图像库上的徽标？

javascript jquery html css

Javascript 正在尝试根据明暗图像更改图像库上的徽标？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在主页上有一个使用此插件的图像库：我的客户希望在较暗的图像上有一个较亮的徽标，在较亮的图像上有一个较暗的徽标。我对jQuery非常熟悉，但从未做过类似的事情这就是他们想要的效果：我知道在这个网站上，他们在正文中添加了一个类（黑色幻灯片），然后使用了一个更具体的类： .dark-slide #logo { color: #fff; } 使徽标从黑色变为白色。我唯一的问题是，我不知道他们是怎么做的，因为这也适用于他们的刷卡功能。我深入研究了他们的JS，但似乎找不到代码我有一些

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

我的客户希望在较暗的图像上有一个较亮的徽标，在较亮的图像上有一个较暗的徽标。我对jQuery非常熟悉，但从未做过类似的事情

这就是他们想要的效果：

我知道在这个网站上，他们在正文中添加了一个类（黑色幻灯片），然后使用了一个更具体的类：

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

使徽标从黑色变为白色。我唯一的问题是，我不知道他们是怎么做的，因为这也适用于他们的刷卡功能。我深入研究了他们的JS，但似乎找不到代码

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

我的另一个想法是使用一个间隔计时器，然后在正确的时间将类添加到必要的映像中——这是我没有做过的事情，也不知道从哪里开始

我认为这应该是相当容易的，但我似乎不能想出一个像样的解决方案，所以我想我会问

任何帮助都将不胜感激。

他们的JavaScript很不幸被混淆了，但您要查找的代码是这样的（有趣的是，它似乎缺少一个分号）：

var u=e.Color.getBrightness（o.getAttribute（“数据右上角颜色”）；
e、 一个（document.body）.toggleClass（“黑色幻灯片”，u<35）

“数据右上角颜色”是在每张幻灯片上单独设置的属性。每次幻灯片更改时，包含上述代码的函数都会触发并检查data-attribute，以查看是否应添加“dark slide”类以使徽标字体变为白色。

必须为处于活动状态的图像设置一个容器。要根据滑块中的图像栏更改徽标，您有2个选项：

在

img

标记中维护一些属性，以便根据属性值进行区分。例如，

如果您无法维护该属性，那么一个复杂的解决方案是编写一个算法，使用画布来确定活动图像的类型

要更改徽标，请执行以下操作：

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

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

这是一个基于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>


使用画布的动态文本颜色演示
带文本的图像
黑文

白色文本

灰色文本

校正颜色



变量


灰度画布

/*~~~~~此函数在各种图像上循环~*/
var c=0；
颜色变异；
函数循环（）{
C++；
document.getElementById（'content'）.style.backgroundColor='rgb（'+（c*29）%255+'，'+（c*29）%255+'，'+（c*29）%255+'）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
绘图图像（彩色）；
}
颜色=document.getElementById（'content'）.style.backgroundColor；
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
clearRect（0，0，canvas.width，canvas.height）；
var x=0；
var y=0；
rect（0,0，canvas.width，canvas.height）；
context.fillStyle='rgb（'+（c*29）%255+'、'+（c*29）%255+'、'+（c*29）%255+'）；
context.fill（）；
/*~~~~打印高度和图像宽度~*/
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数据=imageData.data；
/*~~~~~此部分将图像转换为灰度~*/
对于（变量i=0；i<!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>