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

我正在尝试使用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;
}

#我的图像img{
宽度：100%；
-webkit过滤器：灰度（100%）对比度（60%）不透明度（.3）；
-moz过滤器：灰度（100%）对比度（60%）不透明度（.3）；
-ms滤镜：灰度（100%）对比度（60%）不透明度（.3）；
-o型滤光片：灰度（100%）对比度（60%）不透明度（.3）；
滤镜：灰度（100%）对比度（60%）不透明度（.3）；
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；
过滤器：灰色；/*IE 6-9*/
过滤器：α（不透明度=6）；
-moz不透明度：0.6；
o-转变：.7s；
-ms转换：.7s；
-moz跃迁：.7s；
-webkit转换：.7s；
过渡：.7s；
}
#我的图像img：悬停{
宽度：100%；
-webkit过滤器：无；
-moz过滤器：无；
过滤器：无；
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；
不透明度：（.5）；
o-转变：.7s；
-ms转换：.7s；
-moz跃迁：.7s；
-webkit转换：.7s；
过渡：.7s；
}

---

以前有人这样做过吗？

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

这样就不需要支持跨浏览器过滤器

然后，您可以根据需要使用普通CSS在彩色灰度图像之间进行转换

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

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();
}

var grayImg=new Image（）；
var img=新图像（）；
img.crossOrigin=“匿名”；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolSmall.png";
函数start（）{
IMG2灰度（img，灰度img）；
文件.正文.附件（img）；
document.body.appendChild（灰色img）；
}
函数img2Grayscale（源img、灰度img）{
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数据=imageData.data；
对于（var i=0；i我只包含一个完整的示例，使用css和jquery淡入/淡出并生成灰度，反之亦然，用于图像

灰度缩放最重要的部分是：

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

每当图像悬停/单击时，可以在jquery中使用此选项：


$（文档）.ready（函数（）{
$（“.commential_image”）。单击（函数（）{
//单击图像时保存div的id
var box_id=$（this.attr（“id”）；
//使用类淡出图像
美元("纪念图像").法德托(600,0.3),；
//使用类的灰度图像
$（'.commential_image'）.css({
“过滤器”：“灰度（100%）”，
“-webkit过滤器”：“灰度（100%）”
});
//淡入使用id单击的作者图像
美元("#""加盒子id),法德托(600,1),；
//使用id从单击的作者图像中删除灰度
$（'#'+box_id）.css({
“过滤器”：“灰度（0%）”，
-webkit筛选器“：“灰度（0%）”
});
});
})；
内容1.推荐图片{
显示：块；
位置：相对位置；
浮动：左；
边距：0 30px！重要；
宽度：178px；
高度：178px；
边界半径：50%；
背景图像：url（'https://github.com/jawadmjn/fading-in-fading-out-and-grey-scale-on-images/blob/master/assets/images/home_testimonial_sprite.jpg?raw=true');
背景重复：无重复；
/*“加载时开始”图像的不透明度为0.3，且为灰度*/
不透明度：0.3；
过滤器：α（不透明度=40）；
滤镜：灰度（100%）；
-webkit过滤器：灰度（100%）；
/*加载结束时图像的不透明度为0.3，且为灰度*/
}
#内容1.推荐图片：悬停{
光标：指针；
}
#内容1#证明1{
背景位置：0；
过滤器：灰度（0）；
-webkit过滤器：灰度（0）；
不透明度：1；
}
#内容1#推荐2{
背景位置：-186px 0；
}
#内容1#推荐3{
背景位置：-377px 0；
}
#内容1#推荐4{
背景位置：-2px-187px；
}
#内容1#推荐5{
背景位置：-199px-187px；
}

一个快速的Google提供了一个可以跨多种浏览器工作的源代码：@BigChris谢谢！但是如果你再看一下我的问题，我问了关于不透明度和转换支持的问题。我的代码已经在每个浏览器上工作了谢谢！是否还有目标图像束？实际上我使用PHP从数据库加载图像，而不是just one图像。如下所示：当然。假设您已将class='grayMe'添加到要悬停着色的每个图像元素中（这些图像以全色发送）。在客户端，您可以
$（'.grayMe'）.each
对所有class='grayMe'图像运行函数。该函数对“grayMe”集合的每个成员调用IMG2灰度，并将灰度图像覆盖在每个彩色图像的顶部（设置彩色图像不透明度=0）。然后从新创建的灰度过渡到悬停时的全彩图像是正常的CSS。祝你的项目好运！我是jquery的新手，你能想出一个jsbin示例吗？我真的很感激，我对你有信心。：-）如果您需要更多帮助，请尝试自己编写代码并问另一个问题。干杯！您可以从链接中添加一些内容吗？