ブラウザのWebページを白黒（グレースケール）にするにはどうすればよいですか？

6

WebブラウザでWebページのすべての色を単純な白黒にするにはどうすればよいですか？

これをサポートしているブラウザー（Chrome、Internet Explorer、Firefox）

これも可能ですか？

— ファイ・ジョーンズ
ソース

Operaにはハイコントラストモードがあります... presentations.cita.illinois.edu/funct/slide21.html

— Joe Internet

10

数年早送りすると、CSSでうまくできます。

body {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

  /* Chrome, Safari */
  -webkit-filter: grayscale(1);

  /* Firefox */
  filter: grayscale(1);
}

任意のWebサイトで機能する再利用可能なショートカットが必要な場合、最も簡単なのはおそらくbookmarkletで、これはURLであるかのようにブックマークレットに使用できます。コード：

(function () {
  var body = document.body;
  body.style['filter'] = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
  if (!body.style['filter']) {
    body.style['-webkit-filter'] = 'grayscale(1)';
    body.style['filter'] = 'grayscale(1)';
  }
}());

ブックマークレットのスニペット：

javascript:(function(){var e=document.body;e.style.filter="progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)",e.style.filter||(e.style["-webkit-filter"]="grayscale(1)",e.style.filter="grayscale(1)")}())

— ドン・マッカーディ
ソース

1

IEと他のブラウザーの両方でそれを行う方法を説明するこの素敵なブログエントリを見つけました。

「IE以外のブラウザでの「グレースケール」」（James Padolsey）

IEの基本：

elem {
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  /* Element must "hasLayout"! */
  zoom: 1;
}

カスタムCSSファイルを作成し、ブラウザーでそれを使用してすべてのページに適用します（IEのアクセシビリティオプションを調べます）。

他のブラウザーの場合、要素をループしてグレースケールに変換するJavaScriptを追加するなど、より多くの作業が必要です。したがって、「point'n'click B＆W」になるわけではありませんが、正しい方向に向かうかもしれません。

ブログにはデモページがあり、そこからJSスクリプトをダウンロードできます。

— Ƭᴇcʜιᴇ007
ソース

1

私は同じものを探していましたが、いくつかのオプションを見つけました：

グレースケールツールはあなたが望むことをします

欠点は、すべてのページでアクティブ化する必要があることです。ショートカットはShift+ gで、テキストフィールドにいる場合は機能しません。そして、何かをクリックするたびに、再び色を取得します。
ページフィルター効果ではこれを実行し、クリックできるボタンがあります。ページごとにアクティブ化する必要があります。
シーンには、カラーとグレースケールを連続的にシフトできるスライダーがあります。ページごとにアクティブ化する必要があります。

— ロムウェル
ソース