Сделать изображение двуцветным на JS и CSS

Рейтинг: 0Ответов: 2Опубликовано: 28.01.2015

Идея состоит в следующем. Есть каталог товаров. При наведении на картинку заказчику хочется сделать трансформацию в двуцветное изображение.

Хочется сделать это на стороне клиента по множеству причин (не хотел бы их тут сейчас все перечислять). Реально ли средствами CSS, JS, canvas сделать что-то подобное? Я, видимо, немножко устарел и отстал от современных технологий и не знаю, есть ли какие-нибудь средства для этого.

Пример до и после:

до

после

(Это только пример, я кривенько в пэинте как смог нарисовал, не бейте, но идея понятна.) Но нужна не черно-белая картинка в итоге, а под цвет дизайна (синевато-белый).

В общем, подскажите, в какую сторону копать и какие мануалы почитать? Да и в целом будет ли это сильно ресурсоемко?

css javascript canvas
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Вот тут. Добавить всего-то пару правил. Если нужны более продвинутые фильтры, воспользуйся SVG. Там можно настраивать цветовые матрицы, как ты хочешь. Оба метода сейчас хорошо поддерживаются (в принципе), для небольших изображений - производительность хорошая.

▲ 1

Придумал в своё время такую конструкцию на CSS transition для плавного перехода при наведении цветного изображения в чёрнобелое и обратно. В принципе она подходит и для плавного перехода одного изображения в другое.

HTLM:

<div class="phone">
    <div class="phone-img-color"></div>
    <div class="phone-img-gray"></div>
</div>

CSS:

.phone {
    position: relative;
    width: 200px;
    height: 126px;
}

.phone div {
    position: absolute;
    display: inline-block;
    width: 200px;
    height: 126px;
    -webkit-transition: opacity 1s linear;
       -moz-transition: opacity 1s linear;
         -o-transition: opacity 1s linear;
            transition: opacity 1s linear;
}

.phone-img-color {
    opacity: 1;
    background-image: url("http://savepic.su/4832958.jpg");
}

.phone-img-gray {
    opacity: 0;
    background-image: url("http://savepic.su/4822718.jpg");
}

.phone:hover .phone-img-color {
    opacity: 0;
}
.phone:hover .phone-img-gray {
    opacity: 1;
}