怎样让图片变黑

怎样让图片变成灰色:
 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     

  

 

 

posted @ 2015-12-20 18:35  戒。  阅读(201)  评论(0编辑  收藏  举报