web-dev-qa-db-ja.com

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

HTML/CSSだけでカラービットマップをグレースケールで表示する簡単な方法はありますか？

それはIEと互換性がある必要はありません（そして私はそれがそうではないと想像します） - もしそれがFF3やSf3あるいはその両方で動くなら、それは私にとって十分に良いことです。

私はSVGとCanvasの両方でそれができることを知っています、しかしそれは今多くの仕事のように思えます。

本当に怠惰な人がこれを行う方法はありますか？

cssimagecss3grayscale
593
Ken

CSSフィルタのサポートはWebkitに上陸しました。 それで我々は今クロスブラウザソリューションを持っています。

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}
<img src="http://lorempixel.com/400/200/">

Internet Explorer 10についてはどうですか。

grey のようなポリフィルを使用できます。

696
Salman Abbas

brillout.comの回答 、および Roman Nurikの回答 に続き、「no SVG」の要件をある程度緩和すると、1つのSVGファイルといくつかのCSSのみを使用してFirefoxで画像の彩度を減らすことができます。

SVGファイルは次のようになります。

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <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>

これをresources.svgとして保存すると、今後グレースケールに変更したい任意の画像に再利用できます。

あなたのCSSでは、Firefox特有のfilterプロパティを使ってフィルタを参照します。

.target {
    filter: url(resources.svg#desaturate);
}

MS独自のものも追加してください。 グレースケールに変換したい画像にそのクラスを適用してください（Firefox> 3.5、IE 8で動作） 。

edit ： ここで説明されているSVGアプローチに合わせてSalmanPKの回答で新しいCSS3 filterプロパティを使用することを説明したNiceブログ記事 があります。そのアプローチを使うと、次のようなものになってしまいます。

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

さらなるブラウザサポート情報はこちら 。

126
robertc

Firefoxでは、filter.svgファイルを作成する必要はありません。 データURIスキーム を使用できます。

最初の回答のCSSコードを取得すると、次のようになります。

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

あなたのファイルエンコーディングで "utf-8"文字列を置き換えるように注意してください。

ブラウザは2番目のHTTPリクエストを行う必要がないため、この方法は他の方法よりも高速になります。

85
mquandalle

更新： IE10とIE11用のJavaScript polyfillを含む完全なGitHubレポジトリにしました： https://github.com/karlhorky/gray

私はもともと SalmanPKの答え を使っていましたが、SVGファイルに必要な余分なHTTPリクエストを排除するために以下のバリエーションを作成しました。インラインSVGはFirefoxバージョン10以降で動作します。10より前のバージョンでは、世界のブラウザ市場の1％でさえも占めていません。

私はそれ以来 このブログ記事 で更新を更新し続けていて、色への退色のサポート、SVGでのIE 10/11サポート、そしてデモの部分的なグレースケールを追加しています。

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}
26
Karl Horky

あなたがJavaScriptを使うことができるならば、このスクリプトはあなたが探しているものかもしれません。これはクロスブラウザで動作し、これまでのところ私には問題なく機能しています。別のドメインから読み込まれた画像には使用できません。

http://james.padolsey.com/demos/grayscale/

14
chrismacp

今日も同じ問題を抱えています。私は最初に SalmanPKソリューションを使用しました しかし効果がFFと他のブラウザの間で異なることを発見しました。これは、変換マトリックスがChrome/IEのフィルタのように明度ではなく明度でしか機能しないためです。驚いたことに、私はSVGの代替的でより単純な解決策がFF4 +でも機能し、より良い結果を生むことを発見しました：

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

CSSで：

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

もう1つの注意点は、IE10が標準準拠モードで「filter：grey：」をサポートしていないことです。そのため、ヘッダーで互換モードの切り替えが必要です。

<meta http-equiv="X-UA-Compatible" content="IE=9" />
11
RobertT

CSSだけでグレースケールを実現するための最も簡単な方法はfilterプロパティを使うことです。

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

このプロパティはまだ完全にはサポートされておらず、すべてのブラウザでサポートするために-webkit-filterプロパティがまだ必要です。

10
NK Chaudhary

CSS3やプロプライエタリな-webkit-や-moz- CSSプロパティを使っても、（まだ）可能であるようには見えません。

しかし、私は 昨年6月からのこの投稿 /はHTML上のSVGフィルタを使用していることを発見しました。現在のブラウザでは利用できません（カスタムWebKitビルドを示唆したデモ）が、概念実証として非常に印象的です。

7
Roman Nurik

他の答えで無視されたIE10 +サポートについて尋ねている人々のために、CSSのこの部分をチェックしてください：

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

このマークアップに適用されます。

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
      <defs>
         <filter id="filtersPicture">
           <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
           <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
        </filter>
      </defs>
      <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

その他のデモについては、IE testdriveの CSS3グラフィックセクション およびこの古いIE blog http://blogs.msdn.com/b/ie/をご覧ください。 archive/2011/10/14/svg-filter-effects-in-ie10.aspx

7
Annie

Internet Explorerでは、filterプロパティを使用してください。

WebkitとFirefoxでは、現在のところCSSだけで画像を非表示にする方法はありません。そのため、クライアントサイドのソリューションにはキャンバスまたはSVGを使用する必要があります。

しかし、私はSVGを使うことがよりエレガントだと思います。 FirefoxとWebKitの両方で動作するSVGソリューションについての私のブログ投稿をチェックしてください： http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

そして厳密に言えばSVGはHTMLなのでソリューションは純粋なhtml + cssです:-)

7
brillout

これを行うための新しい方法が、最近のブラウザではしばらく前から利用可能になっています。

background-blend-mode を使うと面白い効果が得られますが、そのうちの1つはグレースケール変換です。

白の背景に設定された値luminosityはそれを可能にします。 （灰色で見るためにホバー）

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}
<div class="test"></div>

明度は画像から取得され、色は背景から取得されます。いつも白いので、色はありません。

しかし、それはもっと多くのことを可能にします。

あなたは3層の効果設定をアニメートすることができます。最初のものは画像で、2番目のものは白黒のグラデーションです。これに乗算ブレンドモードを適用すると、白い部分には以前と同じように白い結果が得られますが、黒い部分には元の画像が表示されます（白い乗算は白になり、黒い乗算は無効です）

グラデーションの白い部分では、前と同じ効果が得られます。グラデーションの黒い部分では、イメージをそれ自体の上にブレンドしているので、結果は変更されていないイメージです。

さて、必要なのはグラデーションを動かしてこの効果をダイナミックにすることだけです。

div {
    width: 600px;
    height: 400px;
}

.test {
    background: url("http://placekitten.com/1000/750"), 
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750"); 
    background-position: 0px 0px, 0px 0%, 0px 0px;
    background-size: cover, 100% 300%, cover;
    background-blend-mode: luminosity, multiply;
    transition: all 2s;
}

.test:hover {
    background-position: 0px 0px, 0px 66%, 0px 0px;
}
<div class="test"></div>

参照

互換性マトリックス

6
vals

たぶんこの方法はあなたを助ける

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

w3schools.org

4
YuZA

独自のCSSプロパティを正しく使用したことを覚えていれば、実際にはIEを使用する方が簡単です。 http://www.ssi-developer.net/css/visual-filters.shtml からこのFILTER: Grayを試してください。

Ax による方法は単純に画像を透明にし、その背後に黒い背景を持っています。私はあなたがこれがグレースケールだと主張できると確信しています。

あなたはJavascriptを使いたくなかったが、私はあなたがそれを使わなければならないと思う。サーバーサイドの言語を使ってそれを行うこともできます。

3
alex
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
3
Amee

Javascriptを使用したい場合は、キャンバスを使用して画像をグレースケールに変換できます。 FirefoxとSafariは<canvas>をサポートしているので、うまくいくはずです。

それで、私は "キャンバスグレースケール"とグーグルしました、そして、最初の結果は http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html でした。

2
Shalom Craimer

古いFirefoxの接頭辞を選択した場合は、新しいFirefoxの接頭辞を使用する必要がないため、フル使用のためにそれほど多くの接頭辞を使用する必要はありません。

そのため、十分に活用するには、次のコードを十分に使用してください。

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: none;
    -webkit-filter: grayscale(0%);
}
2
maťo

これはLESS用のミックスインで、不透明度を選択できます。普通のCSSの変数を異なる割合で自分で入力してください。

ここできちんとしたヒント 、それはマトリックスのために飽和型を使うのでパーセンテージを変えるために何も空想をする必要はない。

.saturate(@value:0) {
    @percent: percentage(@value);

    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(@percent); /* Current draft standard */
    -webkit-filter: grayscale(@percent); /* New WebKit */
    -moz-filter: grayscale(@percent);
    -ms-filter: grayscale(@percent);
    -o-filter: grayscale(@percent);
}

それを使ってください。

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}
2
James van Dyke

webkitのネイティブCSSフィルタのサポートは現在のバージョンから追加されました19.0.1084.46

so -webkit-filter：grayscale（1）は動作するでしょう、そしてそれはwebkitのためのSVGアプローチより簡単です...

2
hjindal

他の人の答えを補完するものとして、SVGの matrix - 頭痛の種なしで、FF上でイメージを彩度を落とすことが可能です。

<feColorMatrix type="saturate" values="$v" />

$vは0と1の間です。 filter:grayscale(50%);と同等です。

実例：

.desaturate {
    filter: url("#desaturate");
    -webkit-filter: grayscale(50%);
}
figcaption{
    background: rgba(55, 55, 136, 1);
    padding: 4px 98px 0 18px;
    color: white;
    display: inline-block;
    border-top-left-radius: 8px;
    border-top-right-radius: 100%;
    font-family: "Helvetica";
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
        <feColorMatrix type="saturate" values="0.4"/>
  </filter>
</svg>

<figure>
  <figcaption>Original</figcaption>
  <img src="http://www.placecage.com/c/500/200"/>
  </figure>
<figure>
  <figcaption>Half grayed</figcaption>
  <img class="desaturate" src="http://www.placecage.com/c/500/200"/>
</figure>

MDNに関するリファレンス

1
Bigood

robertcの回答に基づく ：

このような行列を使う代わりに、 proper をカラー画像からグレースケール画像に変換するには：

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

あなたはこのような変換行列を使うべきです：

0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0     0     0     1

これは、RGBA（赤 - 緑 - 青 - アルファ）モデルに基づくすべての種類の画像でうまく機能するはずです。

なぜあなたが行列を使うべきなのかについてのより多くの情報のために私はrobertcの一つのチェックがリンクをたどっている可能性が高いと投稿した：

1
Kajiyama

Firefoxでグレースケールをパーセントで表示するには、代わりに saturate filter を使用します。（ 'saturate'を検索します）

filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"
0
dval

be 古いブラウザの代わりの方法 は、擬似要素やインラインタグによって生成されたマスクを使うことです。

Img（またはクリックや選択を必要としないテキスト領域）の上に絶対位置を合わせると、カラースケールrgba（）またはtranslucide png）の効果をよく模倣できます。

それは1つのカラースケールを与えませんが、範囲外の色を濃くします。

擬似要素を介して10種類の色のコードペンでテスト、最後はグレーです。 http://codepen.io/gcyrillus/pen/nqpDd （別の画像に切り替えるにはリロード）

0
G-Cyr

1つのひどいが実行可能なソリューション：Flashオブジェクトを使用して画像をレンダリングします。これにより、Flashで可能なすべての変換が可能になります。

Ifユーザーが最新のブラウザを使用しており、if Firefox 3.5およびSafari 4がサポートしている（どちらを行うかどうかはわかりません）、CSSを調整できますcolor-profile属性の属性。グレースケールICCプロファイルURLに設定します。しかし、それはたくさんあります！

0
richardtallent

あなた、または将来同様の問題に直面している他の誰かがPHPにオープンであるなら。 （私はあなたがHTML/CSSを言ったことを知っています、しかしおそらくあなたはバックエンドで既にPHPを使っています）これはPHP解決策です：

PHP Gdライブラリから入手し、プロセスを自動化するための変数をいくつか追加しました。

<?php
$img = @imagecreatefromgif("php.gif");

if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);

// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');

// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);

// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);

imagedestroy($dest);
imagedestroy($src);

?>
0
Trufa

あなたはjFuncの機能の1つを使用することができます - "jFunc_CanvasFilterGrayscale"機能を使用してください http://jfunc.com/jFunc-functions.aspx

0
Dany Maor

このjqueryプラグインを試してください。とはいえ、これは純粋なHTMLとCSSの解決策ではありませんが、あなたが望むものを達成するためのゆっくりした方法です。あなたはあなたの使用法に最も合うようにあなたのグレースケールをカスタマイズすることができます。以下のように使用してください。

$("#myImageID").tancolor();

インタラクティブな demo があります。あなたはそれで遊ぶことができます。

使い方のドキュメントをチェックしてください、それはとても簡単です。 docs

0
Nicholas TJ