Как заменить белый цвет на изображении с помощью Javascript?

Question

Pinterest (вот пример ) и некоторые другие сайты заменяют белый цвет в своих изображениях серым цветом. Они делают это для всех своих изображений, и это, похоже, на стороне клиента.

Возможно ли это с помощью Javascript или есть другой способ сделать это?

Answer 1

Вот быстрый и грязный пример, который может помочь вам начать:

$('#container').on("mouseenter mouseleave", () => {
  $('.overlay').toggle(); 
});

#container {
  display: inline-block;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: .25;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='container'>
  <img src="http://imagizer.imageshack.com/v2/600x742q90/537/xAgiLR.jpg" width="200px" height="247px">
  <div class="overlay" />
</div>