试图基于亮或暗图像更改图库上的徽标？
[英]trying to change logo on image gallery based on light or dark image?
问题描述
I have an image gallery on the home page which is using this plugin: 
我在使用此插件的主页上有一个图片库：
http://codecanyon.net/item/jquery-slider-zoom-inout-effect-fully-responsive/2457203 http://codecanyon.net/item/jquery-slider-zoom-inout-effect-fully-sensitive/2457203
My client wants to have a lighter logo for darker images and a darker logo for lighter images. 我的客户希望对较暗的图像使用较浅的徽标，对较浅的图像使用较暗的徽标。 I'm pretty comfortable with jQuery, but have never had to do something like this. 我对jQuery非常满意，但是从来不需要做这样的事情。
This is the effect they're looking for: 这是他们正在寻找的效果：
http://www.aplusi.com/ http://www.aplusi.com/
I know on this site, they're adding a class (dark-slide) to the body and then using a more specific class: 我知道在此站点上，他们正在向身体添加一个类（深色幻灯片），然后使用一个更具体的类：
.dark-slide #logo {
color: #fff;
}
to get the logo to change from black to white. 使徽标从黑色变为白色。 My only problem is I don't know how they're doing it since it also works with their swipe functionality as well. 我唯一的问题是我不知道他们是如何做它，因为它也有自己的刷卡功能的工作原理也是如此。 I've dug into their JS but can't seem to find the code. 我已经研究了他们的JS，但似乎找不到代码。
I have a few ideas like having a click handler on the arrows to check what image is presented and then add the necessary class. 我有一些想法，例如在箭头上单击处理程序以检查显示的图像，然后添加必要的类。 The only problem with this is that the gallery has a swipe functionality and jQuery doesn't have an event handler for touch events. 唯一的问题是图库具有滑动功能，而jQuery没有触摸事件的事件处理程序。
My other thought was to have an interval timer and then add the class onto the necessary image at the right time - this is something I haven't done and wouldn't know where to start. 我的另一个想法是要有一个间隔计时器，然后在适当的时间将该类添加到必要的图像上-这是我尚未做过的事情，也不知道从哪里开始。
I'm thinking this should be fairly easy, but I can't seem to come up with a decent solution so I thought I would ask. 我认为这应该相当容易，但是我似乎无法提出一个体面的解决方案，因此我想问一下。
Any help would be greatly appreciated. 任何帮助将不胜感激。
3 个解决方案
解决方案1
0 2015-09-05 05:24:26
Their JavaScript is obfuscated unfortunately, but the code you are looking for is this (which funnily enough seems to be missing a semicolon): 不幸的是，他们的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" is an attribute set individually on each slide. “ data-top-right-color”是在每张幻灯片上分别设置的属性。 Every time the slide changes, the function containing the above code fires and checks that data- attribute to see if it should add the "dark-slide" class to make the logo font white. 每次幻灯片更改时，包含以上代码的函数都会触发并检查该data- Attribute以查看是否应添加“ dark-slide”类以使徽标字体变为白色。
解决方案2
0 2015-09-05 05:27:28
There must be a container for the image which is active. 必须有一个活动图像容器。 To change the logo as per the image prsent in the slider, you have 2 options: 要根据滑块中的图像更改徽标，您有2个选项：
- Maintain some attribute in the
imgtag so that you can diffrentiate as per the value of the attribute.在img标签中维护一些属性，以便您可以根据属性的值进行区分。 Eg.例如。 <img src='image.png' data-value='dark'> - If you are unable to maintain the attribute then a complex solution will be to write an algo to determine the type of active image Using canvas 如果您无法维持属性，那么一个复杂的解决方案将是写一个算法中，以确定活动图像的类型使用Canvas
To change the logo: 更改徽标：
var logoImg=$('#logo');
if(activeImgType=='dark')
{
logoImg.attr('light.png');
}else{
logoImg.attr('dark.png');
}
解决方案3
0 2015-09-05 17:48:26
You can use the following code to get it done. 您可以使用以下代码来完成它。 It uses a canvas for processing the image. 它使用画布来处理图像。 The concept is based on detecting whether the image is dark or light using a grayscale version of the original image. 该概念基于使用原始图像的灰度版本检测图像是暗还是亮的。
Here's is a working version based on background color of a div. 这是一个基于div背景颜色的工作版本 。 If you want to use images as background, please refer my code here . 如果要使用图像作为背景，请在此处参考我的代码。 I have uploaded a sample with the background images. 我已经上传了带有背景图片的样本。 I couldn't produce a fiddle or online demo because of cross origin problems. 由于跨源问题，我无法制作小提琴或在线演示。
The code for simple rgb backgrounds is below: 简单的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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.