怎样让图片变成灰色：
css中：
img { -webkit-filter: grayscale(1);/* Webkit */
filter:gray;/* IE6-9 */
13 filter: grayscale(1);/* W3C */ }
14
15
javascipt：
16
17 varimgObj = document.getElementById('js-image');
18 functiongray(imgObj) { varcanvas = document.createElement('canvas');
19 varcanvasContext = canvas.getContext('2d'); varimgW = imgObj.width;
20 varimgH = imgObj.height; canvas.width = imgW; canvas.height = imgH;
21 canvasContext.drawImage(imgObj, 0, 0);
22 varimgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
23 for(vary = 0; y < imgPixels.height; y++){
24 for(varx = 0; x < imgPixels.width; x++){ vari = (y * 4) * imgPixels.width + x * 4;
25 varavg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
26 imgPixels.data[i] = avg; imgPixels.data[i + 1] = avg; imgPixels.data[i + 2] = avg; }
27 } canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
28 returncanvas.toDataURL(); } imgObj.src = gray(imgObj);
29
30
为了能过跨浏览器支持灰度的效果,我们可以把上述方法和一起使用下面的代码片段去实现。这段代码将支持Firefox 3.5+, Opera 15+, Safari, Chrome, and IE
31
32 img { -webkit-filter: grayscale(100%);
33 -webkit-filter: grayscale(1);
34 filter: grayscale(100%);
35 filter:url('../img/gray.svg#grayscale');
36 filter:gray; }
37
