怎样让图片变黑
怎样让图片变成灰色:
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
现在的几乎什么都不懂,但是不代表以后的我也是这样。