标题几乎说明了一切。我浏览了许多jQuery插件，以将图像变成黑色和白色。但是它们都没有提供我想到的功能。我希望将图像悬停在指定元素时变成彩色图像。
这是我当前使用的插件：
(function ($) {
$.fn.extend({
BlackAndWhite: function (options) {
'use strict';
var container = this,
self = this,
defaults = {
hoverEffect: true,
webworkerPath: false,
responsive: true,
invertHoverEffect: false,
speed: 500
};
options = $.extend(defaults, options);
//@public vars
var hoverEffect = options.hoverEffect,
webworkerPath = options.webworkerPath,
invertHoverEffect = options.invertHoverEffect,
responsive = options.responsive,
fadeSpeedIn = $.isPlainObject(options.speed) ? options.speed.fadeIn : options.speed,
fadeSpeedOut = $.isPlainObject(options.speed) ? options.speed.fadeOut : options.speed;
//@private var
var supportsCanvas = !!document.createElement('canvas').getContext,
$window = $(window);
/* Check if Web Workers are supported */
var supportWebworker = (function () {
return (typeof (Worker) !== "undefined") ? true : false;
}());
var isIE7 = $.browser.msie && +$.browser.version === 7;
//@private methods
//convert any image into B&W using HTML5 canvas
var greyImages = function (img, canvas, width, height) {
var ctx = canvas.getContext('2d'),
currImg = img,
i = 0,
grey;
ctx.drawImage(img, 0, 0, width, height);
var imageData = ctx.getImageData(0, 0, width, height),
px = imageData.data,
length = px.length;
// web worker superfast implementation
if (supportWebworker && webworkerPath) {
var BnWWorker = new Worker(webworkerPath + "BnWWorker.js");
BnWWorker.postMessage(imageData);
BnWWorker.onmessage = function (event) {
ctx.putImageData(event.data, 0, 0);
};
} else {
// no webworker slow implementation
for (; i < length; i += 4) {
grey = px[i] * 0.3 + px[i + 1] * 0.59 + px[i + 2] * 0.11;
px[i] = px[i + 1] = px[i + 2] = grey;
}
ctx.putImageData(imageData, 0, 0);
}
};
var injectTags = function (pic, currImageWrapper) {
var src = pic.src;
if (supportsCanvas && (!($.browser.msie && $.browser.version == '9.0'))) {
var currWidth = $(currImageWrapper).find('img').width(),
currHeight = $(currImageWrapper).find('img').height(),
realWidth = pic.width,
realHeight = pic.height;
//adding the canvas
$('<canvas width="' + realWidth + '" height="' + realHeight + '"></canvas>').prependTo(currImageWrapper);
//getting the canvas
var currCanvas = $(currImageWrapper).find('canvas');
//setting the canvas position on the Pics
$(currCanvas).css({
'position': 'absolute',
top: 0,
left: 0,
width: currWidth,
height: currHeight,
display: invertHoverEffect ? 'none' : 'block'
});
greyImages(pic, currCanvas[0], realWidth, realHeight);
if (hoverEffect) {
$(currImageWrapper).mouseenter(function () {
if(!invertHoverEffect) {
$(this).find('canvas').stop(true, true).fadeOut(fadeSpeedOut);
} else {
$(this).find('canvas').stop(true, true).fadeIn(fadeSpeedIn);
}
});
$(currImageWrapper).mouseleave(function () {
if(!invertHoverEffect) {
$(this).find('canvas').stop(true, true).fadeIn(fadeSpeedIn);
} else {
$(this).find('canvas').stop(true, true).fadeOut(fadeSpeedOut);
}
});
}
} else {
var ieWidth = $(currImageWrapper).find('img').prop('width');
var ieHeight = $(currImageWrapper).find('img').prop('height');
//adding the canvas
$('<img src=' + src + ' width="' + ieWidth + '" height="' + ieHeight + '" class="ieFix" /> ').prependTo(currImageWrapper);
$('.ieFix').css({
'position': 'absolute',
top: 0,
left: 0,
'filter': 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)',
display: invertHoverEffect ? 'none' : 'block'
});
if (hoverEffect) {
$(currImageWrapper).mouseenter(function () {
if(!invertHoverEffect) {
$(this).children('.ieFix').stop(true, true).fadeOut(fadeSpeedOut);
} else {
$(this).children('.ieFix').stop(true, true).fadeIn(fadeSpeedIn);
}
});
$(currImageWrapper).mouseleave(function () {
if(!invertHoverEffect) {
$(this).children('.ieFix').stop(true, true).fadeIn(fadeSpeedIn);
} else {
$(this).children('.ieFix').stop(true, true).fadeOut(fadeSpeedOut);
}
});
}
}
};
this.init = function (options) {
$(container).each(function (index, currImageWrapper) {
var pic = new Image();
pic.src = $(currImageWrapper).find('img').prop("src");
if (!pic.width) {
$(pic).on("load", function() {injectTags( pic, currImageWrapper);});
} else {
injectTags( pic, currImageWrapper );
}
});
if (responsive) {
$window.on('resize orientationchange', container.resizeImages);
}
};
this.resizeImages = function () {
$(container).each(function (index, currImageWrapper) {
var pic = $(currImageWrapper).find('img:not(.ieFix)');
var currWidth,currHeight;
if (isIE7) {
currWidth = $(pic).prop('width');
currHeight = $(pic).prop('height');
} else {
currWidth = $(pic).width();
currHeight = $(pic).height();
}
$(this).find('.ieFix, canvas').css({
width: currWidth,
height: currHeight
});
});
};
return self.init(options);
}
});
}(jQuery));
我认为您也可以使用CSS3来做到这一点。为了使任何图像（假设它具有"图像"类）到黑白，您可以使用： -
img.Image{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
，要将其重新变成悬停的有色人种，您可以做到这一点： -
img.Image:hover{
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
}
jquery，可以通过这样做来实现同样的事情： -
为了使图像变成黑色和白色，请执行此操作： -
如果您想在文档上准备此此事，则
$('document').ready(function(){
$("img.Image").css({'-webkit-filter':'grayscale(100%)','-moz- filter':'grayscale(100%)','filter': 'grayscale(100%)'});
});
之后您需要的是： -
$("img.Image").on('hover',function(){
$(this).css({'-webkit-filter':'grayscale(0%)','-moz-filter':'grayscale(0%)','filter':'grayscale(0%)'});
},function(){
$(this).css({'-webkit-filter':'grayscale(100%)','-moz-filter':'grayscale(100%)','filter': 'grayscale(100%)'});
}
);
将图像转换为html/css中的灰度，建议通过平均其红色，绿色和蓝色组件来将图像在Firefox中进行。但是，这不会导致具有相同亮度的图像。通过使用淡淡的过滤器，您将获得更好的结果：
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="gray">
<feColorMatrix type="saturate" values="0"/>
</filter>
</svg>
在您的CSS中使用filter: url(grayscale.svg#grayscale);。（如果您的文档很简单，那么您实际上可以将HTML，CSS和SVG放在同一文档中。）