CSSのfilterプロパティを使って画像をグレースケールに変換する

2024-04-02

HTML/CSSで画像をグレースケールに変換する方法

方法1：CSSの filter プロパティを使用する

これは最も簡単な方法です。以下のコードを画像のスタイルシートに追加するだけです。

img {
  filter: grayscale(100%);
}

grayscale プロパティの値は、0%から100%までの数値で指定できます。0%は元のカラー画像、100%は完全なグレースケールになります。

方法2：SVGフィルターを使用する

SVGフィルターを使用して、より高度なグレースケール効果を作成することができます。以下のコードは、画像をグレースケールに変換するSVGフィルターの例です。

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <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"/>
  </filter>
</svg>

このコードをHTMLファイルに保存し、以下のコードを使用して画像に適用します。

<img src="image.jpg" style="filter: url(#grayscale);">

上記以外にも、JavaScriptを使用して画像をグレースケールに変換する方法もあります。ただし、この方法はより複雑なので、ここでは説明しません。

注意事項

filter プロパティは古いブラウザではサポートされていない場合があります。
SVGフィルターは、複雑な画像の場合、処理速度が遅くなる可能性があります。

HTML/CSSで画像をグレースケールに変換するには、いくつかの方法があります。どの方法を選択するかは、要件とブラウザのサポート状況によって異なります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像をグレースケールに変換する</title>
</head>
<body>
  <img src="image.jpg" alt="画像">
  <style>
    img {
      filter: grayscale(100%);
    }
  </style>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像をグレースケールに変換する</title>
</head>
<body>
  <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
    <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"/>
    </filter>
  </svg>
  <img src="image.jpg" style="filter: url(#grayscale);">
</body>
</html>

JavaScriptを使用して画像をグレースケールに変換する方法は、以下のサイトを参考にしてください。

画像をグレースケールに変換するその他の方法

JavaScriptを使用して、画像のピクセルデータを直接操作することで、グレースケールに変換することができます。

const img = document.querySelector('img');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = img.width;
canvas.height = img.height;

ctx.drawImage(img, 0, 0);

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;

for (let i = 0; i < data.length; i += 4) {
  const gray = (data[i] + data[i + 1] + data[i + 2]) / 3;
  data[i] = gray;
  data[i + 1] = gray;
  data[i + 2] = gray;
}

ctx.putImageData(imageData, 0, 0);

img.src = canvas.toDataURL();