Черно белый эффект для фотографии?

Question

[Богдан]

Здравствуйте. Подскажите пожалуйста. Нашел вот статью, как сделать фотку черно-белой, но там на Three.js. Мне как бы интерактива не нужно, можно ли как-то сделать такой же фильтр на обычном Canvas, что бы не тащить в проект Three.js? Спасибо.

Comments

[Богдан]

Спасибо за ответы, но тут не простой grayscale, тут какой-то фильтр налаживается, я так понимаю, там вшита логика соседних пикселей. И как бы нужен canvas, что бы потом его можно было сохранить (отправить на сервер).

[coderisimo]

см. мой ответ выше

Answer 1

[coderisimo]

img {
  -webkit-filter: grayscale(100%); /*для safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

Comments

[coderisimo]

Тогда , как я вижу на фото как минимум требуется blur , noise(grain)
и обесцвечивание. И наиболее простой путь - использование готовых инструментов. Возможно не таких монструозных как three.js
Например : CamanJS
Как выглядит процессинг :

Caman('#my-image', function () {
    this.brightness(10);
    this.contrast(30);
    this.sepia(60);
    this.saturation(-30);
    this.render();
  });

camanjs.com/examples в этом примере попробуй установить парамзы как на картинке



т.е мы убираем цвет, добавляем шум и размытие.
Ниже по ссылке готовые пресеты ))
 

[Богдан]

Василий, Спасибо, как бы мне по факту нужен был переключатель noise, вроде уже реализовал его демка

[coderisimo]

Богдан, на примере то блер и чб еще есть

[Богдан]

Василий, Ну как бы черно-белое на канвасе не сложно реализовать. Меня интересовало как можно именно сделать что бы изображение было как крупинистое. Но вот только в этого подхода что я сделал есть один нюанс:
1) После каждого рендера, этот шум как бы меняется, потому что там стоит Random
2) Крупа не совсем такая как на фотке что и скинул в топике, потому что там видимо есть логика обработки соседних пикселей, что бы все было красивыми крупинками, а тут просто рандом.

[coderisimo]

Богдан, в camanjs есть возможности гибко настраивать и не только шум, но и размытие. Однако, разумеется, даже подрвинутые цифровые алгоритмя не могу полноценно имитировать "шум" пленки. Иначе народ забросил бы пленочные аппараты )))

[Богдан]

Василий, Ну как бы там не шум, если Вы посмотрите статью которую я указал в топике, то на Three.js реализовано, что как бы объекты складываются с мелких шариков. И camanjs оверхед когда есть канвас, в котором стандарнтный фильтр прицепить одна строчка кода )

Answer 2

[Александр Суханов]

CSS:
filter: grayscale(100%)
И такими же фильтрами можно уменьшить яркость, контрастность и т.д.