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

こんにちは！パーク社員のゆんぼうです。

Webアプリ開発のクロスブラウザ対応したときに注意したいことを紹介します。

今回は、画像のグレースケールについてです。

動作確認した環境

OS: Windows 10 Pro

ブラウザ名	バージョン
Google Chrome	62.0.3202.94
Mozilla Firefox	57.0
Microsoft Edge	41.16299.15.0
Microsoft Internet Explorer (IE11)	11.64.16229.0

グレースケールとは

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

以下のデモページを表示してみてください。

【デモページはこちら】

【ソースファイルはこちら】

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

グレースケール: CSS filter

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

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

グレースケール: SVG

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

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");
}

グレースケール: HTML canvas

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

grayscale($("#test3"))

function grayscale(selector) {
    var canvas = document.createElement('canvas');
    var canvasContext = canvas.getContext('2d');
    var img = new Image();
    img.src = selector.attr("src");
    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());
    };
}

ブラウザ毎のグレースケール化の挙動

クロスブラウザ対応で注意したいこととして、グレースケール化の手法はブラウザ毎に挙動が異なります。全てのブラウザで動作する手法は、「HTML canvas」になります。

ブラウザ名	CSS filter	SVG	HTML canvas
Google Chrome	○	×	○
Mozilla Firefox	○	○	○
Microsoft Edge	○	×	○
Microsoft Internet Explorer (IE11)	×	×	○

以上です。