Help us understand the problem. What is going on with this article?

[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] グレースケールの表示

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away