ウェブサイトの画像にグレー効果を加える3つの方法

画像 {
-webkit-filter: grayscale(1); /* Webkit */
フィルター: グレー; /* IE6-9 */
フィルター: グレースケール(1); /* W3C */
}

var imgObj = document.getElementById('js-image');
関数gray(imgObj) {
var キャンバス = document.createElement('キャンバス');
var キャンバスコンテキスト = キャンバス.getContext('2d');
var imgW = imgObj.width;
var imgH = imgObj.height;
キャンバスの幅 = imgW;
キャンバスの高さ = imgH;
キャンバスコンテキストで画像を描画します。
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(var y = 0; y < imgPixels.height; y++){
for(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] = 平均;
imgPixels.data[i + 1] = 平均;
imgPixels.data[i + 2] = 平均;
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
canvas.toDataURL() を返します。
}
imgObj.src = グレー(imgObj);

<svg xmlns="http://www.w3.org/2000/svg">
<フィルター id="グレースケール">
<feColorMatrix type="matrix" values="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"/>
</フィルター>
</svg>

画像 {
フィルター: url('img/gray.svg#grayscale');
}

画像 {
フィルター: url('url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200.3333%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");')
}

画像 {
-webkit-フィルター: グレースケール(100%);
-webkit-フィルター: グレースケール(1);
フィルター: グレースケール(100%)
フィルター: url('../img/gray.svg#grayscale');
フィルター: グレー;
}

.no-js画像{
-webkit-フィルター: グレースケール(100%);
-webkit-フィルター: グレースケール(1);
フィルター: グレースケール(100%)
フィルター: url('../img/gray.svg#grayscale');
フィルター: グレー;
}