web-dev-qa-db-ja.com

ブラウザのWebページを白黒(グレースケール)に変換するにはどうすればよいですか?

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

これをサポートしているブラウザ(Chrome、Internet Explorer、またはFirefox)はどれですか?

これも可能ですか?

6
Phi Jones

数年早送りします。これは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)")}())
10
Don McCurdy

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

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

    欠点は、すべてのページでアクティブ化する必要があることです。ショートカットは次のとおりです。 Shift+g、テキストフィールドにいる場合は機能しません。そして、何かをクリックするたびに、再び色が表示されます。

  • ページフィルター効果 これ以上のことを行い、クリックできるボタンがあります。ページごとにアクティブ化する必要があります。

  • 光沢 は、カラーとグレースケールを連続的に切り替えることができるスライダーを提供します。ページごとにアクティブ化する必要があります。

1
Romwell

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

" IE以外のブラウザでは「グレースケーリング」 "(James Padolsey)

IE具体的には:

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

カスタムCSSファイルを作成し、それをブラウザーで使用してすべてのページに適用することをお勧めします(IEのアクセシビリティオプションを調べてください)。

他のブラウザの場合、要素をループしてグレースケールに変換するためのjavascriptの追加など、より多くの作業が必要です。したがって、「ポイントアンドクリックB&W」にはなりませんが、正しい方向に進む可能性があります。

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

1

また、Win10ユーザーの場合は、[設定]/[コンピューターの簡単操作]/[カラーフィルター]で[グレースケールモード]を有効にできます。 Webブラウザを含むすべてのソフトウェアに影響します。

ソース: https://winaero.com/blog/enable-greyscale-mode-windows-10/