如何使图像黑白？

Question

I have created Image. How to convert color Image to black&white. For example, on mouse over it.

Answer 1

First open it in a decent image editor, convert it to grayscale (I assume that you want more colors than black and white ;) ), save it in the webapplication.

Then, on the mouseover just call some JavaScript function which changes the src of the HTML <img> element to point to the URL of the grayscale image instead.

Basic kickoff example:

<img src="color.jpg" onmouseover="this.src='blackwhite.jpg'">

Answer 2

The easiest way is to create another image in black and white server side (or using an image editing program if the image isn't dynamic) and swap out the color one for b&w on mouse over.

Then just just set the opacity using css: http://www.quirksmode.org/css/opacity.html

Answer 3

The Pixastic JS Image Manipulation library has this feature, which you can call via JSNI.

There's also this script which appears to only work in IE using proprietary Microsoft magic.

But honestly, just generate a desaturated image for every image you want on the server-side, and swap them out using JS/CSS.

Answer 4

img {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}
img:hover {
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}

The Black and White effect is achieved with the grayscale value for the filter property. grayscale(100%) corresponds to Black and White and grayscale(0%) corresponds to full colors. The -webkit-filter prefix is necessary for that property The smooth animation is achieved with the transition property