使用不透明度的jQuery将图像转换为灰度

Question

我正在尝试使用CSS使我的图像灰度图像，但除非您使用SVG，否则它不适用于Firefox。但问题是当你使用SVG时，其他功能如不透明度和过渡将不起作用。

我希望能使用支持所有浏览器的jQuery找到类似的代码。

这是我的CSS：

#myimage img{
    width: 100%;
    -webkit-filter: grayscale(100%) contrast(60%) opacity(.3);
     -moz-filter: grayscale(100%) contrast(60%) opacity(.3);
      -ms-filter: grayscale(100%) contrast(60%) opacity(.3);
       -o-filter: grayscale(100%) contrast(60%) opacity(.3);
        filter: grayscale(100%) contrast(60%) opacity(.3);
         filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
          filter: gray; /* IE 6-9 */
           filter:alpha(opacity=6);
            -moz-opacity: 0.6;
    o-transition: .7s;
    -ms-transition: .7s;
    -moz-transition: .7s;
    -webkit-transition: .7s;
    transition: .7s;





}
#myimage img:hover{
    width: 100%;
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    opacity: (.5);
    o-transition: .7s;
    -ms-transition: .7s;
    -moz-transition: .7s;
    -webkit-transition: .7s;
    transition: .7s;
}

有没有人在此之前完成它可以帮助我解决这个问题？

Answer 1

您可以使用canvas元素动态创建图像的灰度版本。

这绕过了支持跨浏览器过滤器的需求。

然后您可以根据需要使用普通的CSS在颜色＆lt; - ＆gt;灰度图像之间进行转换。

使用html canvas元素创建彩色图像的灰度版本的示例代码：

var grayImg=new Image();

var img=new Image();
img.crossOrigin="anonymous";
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolSmall.png";
function start(){
    img2Grayscale(img,grayImg);
    document.body.appendChild(img);
    document.body.appendChild(grayImg);
}

function img2Grayscale(sourceImg,grayImg){
    var canvas=document.createElement('canvas');
    var ctx=canvas.getContext('2d');
    canvas.width=sourceImg.width;
    canvas.height=sourceImg.height;
    ctx.drawImage(sourceImg,0,0);
    var imageData=ctx.getImageData(0,0,canvas.width,canvas.height);
    var data=imageData.data;
    for(var i=0;i<data.length;i+=4){
        // make the r,g,b components of this pixel == the average of r,g,b
        data[i+0]=data[i+1]=data[i+2]=(data[i]+data[i+1]+data[i+2])/3;
    }
    ctx.putImageData(imageData,0,0);
    grayImg.src=canvas.toDataURL();
}

Answer 2

我只是包含一个完整的例子，使用css和jquery进行淡入/淡出和制作grayScale，反之亦然。

grayScaling最重要的部分是：

$('#yourImage').css({
        "filter": "grayscale(0%)",
        "-webkit-filter": "grayscale(0%)"
    });

只要图像悬停/点击，就可以在jquery中使用它：

＆＃13;

＆＃13;

$(document).ready(function(){

  $(".testimonial_image").click(function(){
        // save id of div the image is clicked
        var box_id = $(this).attr("id");

        // Fade out authors images using class
        $(".testimonial_image").fadeTo(600, 0.3);

        // Grayscale authors images using class
        $('.testimonial_image').css({
            "filter": "grayscale(100%)",
            "-webkit-filter": "grayscale(100%)"
        });

        // Fade in author's images which is clicked using id
        $('#'+box_id).fadeTo(600, 1);

        // remove Grayscale from clicked author's images using id
        $('#'+box_id).css({
            "filter": "grayscale(0%)",
            "-webkit-filter": "grayscale(0%)"
        });
    });

});

＆＃13;

#content_1 .testimonial_image {
    display: block;
    position: relative;
    float: left;
    margin: 0 0 0 30px !important;
    width: 178px;
    height: 178px;
    border-radius: 50%;
    background-image: url('https://github.com/jawadmjn/fading-in-fading-out-and-grey-scale-on-images/blob/master/assets/images/home_testimonial_sprite.jpg?raw=true');
    background-repeat: no-repeat;
    /* START on load opacity of images is 0.3 and they are grayscale */
    opacity: 0.3;
    filter: alpha(opacity=40);
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    /* END on load opacity of images is 0.3 and they are grayscale */
}
#content_1 .testimonial_image:hover {
    cursor: pointer;
}
#content_1 #testimonial1 {
    background-position: 0 0;
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    opacity: 1;
}
#content_1 #testimonial2 {
    background-position: -186px 0;
}
#content_1 #testimonial3 {
    background-position: -377px 0;
}
#content_1 #testimonial4 {
    background-position: -2px -187px;
}
#content_1 #testimonial5 {
    background-position: -199px -187px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content_1">
    <div class="testimonial_image" id="testimonial1"></div>
    <div class="testimonial_image" id="testimonial2"></div>
    <div class="testimonial_image" id="testimonial3"></div>
    <div class="testimonial_image" id="testimonial4"></div>
    <div class="testimonial_image" id="testimonial5"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用css和javascript进行灰阶的完整演示：grayScale java and css