Обесцветить изображения с помощью Javascript / jQuery / CSS в ХРОМЕ

Question

Я не могу найти способ визуализации изображений в оттенках серого из цветных изображений в Chrome с помощью CSS или Javascript. У меня такое ощущение, что любое решение Canvas не будет работать в Chrome, и я искал другое.

Любая помощь приветствуется, я пробовал Pixastic и кучу других решений jQuery, но все безрезультатно.

Answer 1

Это может помочь:

    filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);

Answer 2

Я хотел сделать то же самое неделю или две назад и нашел этот пример:

http://webdesignerwall.com/tutorials/html5-grayscale-image-hover

Он работает, отрисовывая изображение на холсте, затемняя его в градациях серого и затемBase64 представление.Это не для IE, но, так как вы указали Chrome, вам стоит пойти дальше.

Просто для полноты, в градациях серого изображение в IE можно сделать с помощью

filter: gray;

опция css

Answer 3

Я не знаю, является ли Javascript обязательным для вас, или вы планируете использовать это на динамических изображениях, но я собрал учебник, который объясняет, как это сделать, используя только CSS / HTML. Он использует объявления в стиле opacity и transition. При этом два изображения могут создать «иллюзию перехода» между собой, используя псевдо-селектор :hover.

Проверьте это и дайте мне знать, если это вообще поможет. http://www.stephenwalcher.com/blog/2012/01/22/javascript-free-image-desaturat/