Drei Möglichkeiten zum Erstellen eines Graueffekts auf Website-Bildern

img {
-webkit-filter: Graustufen(1); /* Webkit */
Filter: grau; /* IE6-9 */
Filter: Graustufen(1); /* W3C */
}

var imgObj = document.getElementById('js-image');
Funktion grau(imgObj) {
var Leinwand = Dokument.createElement('Leinwand');
var canvasContext = canvas.getContext('2d');
var imgW = imgObj.width;
var imgH = imgObj.height;
Leinwand.Breite = BildW;
Leinwand.Höhe = BildH;
canvasContext.drawImage(imgObj, 0, 0);
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
für(var y = 0; y < imgPixels.height; y++){
für(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = Durchschnitt;
imgPixels.data[i + 1] = Durchschnitt;
imgPixels.data[i + 2] = Durchschnitt;
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.Breite, imgPixels.Höhe);
gibt canvas.toDataURL() zurück;
}
imgObj.src = grau(imgObj);

<svg xmlns="http://www.w3.org/2000/svg">
<filter id="Graustufen">
<feColorMatrix Typ="Matrix" Werte="0,3333 0,3333 0,3333 0 0 0,3333 0,3333 0,3333 0 0 0,3333 0,3333 0,3333 0 0 0 0 0 1 0"/>
</filter>
</svg>

img {
Filter: URL ('img/gray.svg#Graustufen');
}

img {
Filter: URL ('URL("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='Graustufen'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#Graustufen");')
}

img {
-Webkit-Filter: Graustufen (100 %);
-webkit-filter: Graustufen(1);
Filter: Graustufen (100 %);
Filter: URL ('../img/gray.svg#Graustufen');
Filter: grau;
}

.no-js img {
-Webkit-Filter: Graustufen (100 %);
-webkit-filter: Graustufen(1);
Filter: Graustufen (100 %);
Filter: URL ('../img/gray.svg#Graustufen');
Filter: grau;
}