パークのソフトウエア開発者ブログ|ICT技術(Java・Android・iPhone・C・Ruby)なら株式会社パークにお任せください

開発の解決方法や新しい手法の情報を、パークのエンジニアが提供します。パークのエンジニアが必要な場合は、ぜひお気軽にお問い合わせ下さい。 株式会社パーク:http://www.pa-rk.co.jp/


テーマ:

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

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) × ×

 

以上です。

いいね!した人  |  コメント(0)  |  リブログ(0)

パク太郎さんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

同じテーマ 「JavaScript」 の記事