Как превратить веб-страницы в браузере в черно-белые (в градациях серого)?

Question

Как я могу превратить все цвета веб-страниц в простые черно-белые в моем веб-браузере?

Какие браузеры поддерживают это (Chrome, Internet Explorer или Firefox)?

Это вообще возможно?

Answer 1

Перенесемся на пару лет вперед, и это можно сделать красиво в CSS.

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

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

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

Если вам нужен многократно используемый ярлык, который работает на любом веб-сайте, возможно, проще всего будет использовать букмарклет, который можно использовать для букмарклета, как если бы он был 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)")}())

Answer 2

Я искал то же самое и нашел несколько вариантов:

• Grayscale Tool делает то, что вы хотите

  Недостатком является то, что вам нужно активировать его на каждой странице, и это сочетание клавиш Shift+g, которое не работает, если вы находитесь в текстовом поле. И каждый раз, когда вы нажимаете что-то, вы снова получаете цвета.

• Эффект фильтра страницы делает это и многое другое, и имеет кнопку, которую вы можете нажать. Необходимо активировать на странице.

• Sheen предлагает слайдер, который позволяет непрерывно переключаться между цветом и оттенками серого. Необходимо активировать на странице.

Answer 3

Я нашел эту хорошую запись в блоге, которая объясняет, как сделать это в IE и других браузерах:

«Оттенки серого» в браузерах, отличных от IE (Джеймс Падолси)

Основы для IE, в частности:

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

Вы захотите создать собственный CSS-файл и использовать его в браузере, чтобы применить ко всем страницам (посмотрите параметры доступности IE).

Для других браузеров это требует больше работы, включая добавление javascript для циклического прохождения элементов и преобразования в оттенки серого. Так что это не будет "point & nclick B & W", но может привести вас в правильном направлении.

В блоге есть демонстрационная страница , и вы можете скачать скрипт JS оттуда.