[JavaScript][CSS] グレースケールの表示

画像のグレースケールについて紹介します。（2018年11月現在）

動作環境

OS: Windows 10 Pro
Google Chrome: 70.0.3538.110
Mozilla Firefox: 63.0.3
Microsoft Edge: 42.17134.1.0
Microsoft Internet Explorer: 11.407.17134.0

グレースケールとは

グレースケールとは、画像を白色から黒色までの明暗で表現したものです。ここでは、通常の画像を用意して、Webアプリ上で画像をグレースケール化する手法を紹介します。

以下のデモページを表示してみてください。
デモページはこちら
ソースファイルはこちら

「method」カラムにグレースケールの手法、「source」カラムに元の画像、「result」カラムにグレースケール化の画像を表示しています。以下に、3つの手法について紹介します。

CSS filter

1つ目は、CSSのfilterプロパティを使用する方法です。3つの内、最もスマートに実装できます。しかし、IE11では動作しません。

index.css

img#test1 {
    filter: grayscale(100%);
}

ブラウザ名	動作可否	CSS filter
Google Chrome	○	表示される
Mozilla Firefox	○	表示される
Microsoft Edge	○	表示される
Microsoft Internet Explorer	×	表示されない

SVG

2つ目は、SVGのfilterを使用する方法です。HTMLに直接SVGを組み込むか、CSSのfilterプロパティに指定することができます。実装コードが多くなります。

index.css

img#test2 {
    filter: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="grayscale"><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"></fecolormatrix></filter></defs></svg>#grayscale");
}

ブラウザ名	動作可否	SVG
Google Chrome	×	表示されない
Mozilla Firefox	○	表示される
Microsoft Edge	×	表示されない
Microsoft Internet Explorer	×	表示されない

HTML canvas

最後は、HTML canvasを使用する方法です。

index.js

grayscale($("#test3"))

function grayscale(selector) {
    var canvas = document.createElement('canvas');
    var canvasContext = canvas.getContext('2d');
    var img = new Image();
    img.onload = function () {
        var imgW = img.width;
        var imgH = img.height;
        canvas.width = imgW;
        canvas.height = imgH;

        canvasContext.drawImage(img, 0, 0);
        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] = avg;
                imgPixels.data[i + 1] = avg;
                imgPixels.data[i + 2] = avg;
            }
        }

        canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        selector.attr("src", canvas.toDataURL());
    };
    img.src = selector.attr("src");
}

ブラウザ名	動作可否	HTML canvas
Google Chrome	○	表示される
Mozilla Firefox	○	表示される
Microsoft Edge	○	表示される
Microsoft Internet Explorer	○	表示される

全てのブラウザで動作する手法は、「HTML canvas」になります。

引用

[Javascript][CSS] グレースケールの表示