Is there any way to invert the colors of a png image using CSS or jQuery?

Question

I am creating a music player based on the SoundCloud API. And I would like to use a waveform image. But the waveform provided by SoundCloud is not suitable for my needs. In fact, the waves are transparent and around them are white. I would like to fill the waves with a background image and remove the white color around the waves.

Here is an example of a SoundCloud waveform: http://w1.sndcdn.com/ZnIW9DSkAhPU_m.png

The attached image is what I am looking for:

I could find some clues, for example:

-webkit-mask-box-image: url(https://w1.sndcdn.com/cWHNerOLlkUq_m.png);
background: #81D8D0;

or HTML5 canvas, but I couldn’t turn them into what I want. There is also waveform.js, but it only accepts colors, not the color of the waveform.

Any idea?

Answer 1

, ImageMagick CSS, PHP, ...

1. wave.png true (255) ( 3)

convert wave.png -threshold 50% PNG32:w1.png

2:

composite w1.png einstein.jpg x.png

3: Resuilt out.png

convert x.png -transparent white out.png

ImageMagick , .

, :

composite w1.png einstein.jpg png:- | convert png:- -transparent white out.png

; -)

Answer 2

,

jsFiddle

, svg,

• -
• , b & w

/* Small animation logic to move the progress bar*/
var progress = 0;

setInterval(function() {
  document.querySelector('#progress').setAttribute('width', ((progress++) % 100) + '%');
}, 50);

#track {
  position: absolute;
  top: 25%;
  height: 50%;
  width: 100%;
}
html,
body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  background: #87e0fd;

  /* Just a background gradient*/
  background: -moz-linear-gradient(top, #efefef 0%, #aaa 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #efefef), color-stop(100%, #aaa));
  background: -webkit-linear-gradient(top, #efefef 0%, #aaa 100%);
  background: -o-linear-gradient(top, #efefef 0%, #aaa 100%);
  background: -ms-linear-gradient(top, #efefef 0%, #aaa 100%);
  background: linear-gradient(to bottom, #efefef 0%, #aaa 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#aaa', GradientType=0);
}

<svg id="track">
  <defs>
    <filter id="color-change">
      
      <!-- Transforms the wave into a fitting b&w mask-->
      <feColorMatrix values="
                -2 0 0 0 1
                0 -2 0 0 1
                0 0 -2 0 1
                0 0 0 0 1
                " />
    </filter>
    
    <!-- define a mask as the waveform image with the above filter applied -->
    <mask id="mask">
      <image id="wave" xlink:href="http://w1.sndcdn.com/ZnIW9DSkAhPU_m.png" width="100%" height="100%" filter="url(#color-change)" preserveAspectRatio="none" />
    </mask>
  </defs>

  <!--Display the background image with the mask applied-->
  <image x="0" y="0" height="100%" width="100%" xlink:href="https://lh4.googleusercontent.com/-ls_ukHfuaGg/U7cdwhR1OMI/AAAAAAAALQ4/ZxHrgkz9fH8/s506/Capture+du+2014-07-04+23%3A31%3A40.png" preserveAspectRatio="none" mask="url(#mask)" />
  
  <!-- Display a progress rectangle with the mask applied, and alpha .5 -->
  <rect id="progress" x="0" y="0" height="100%" fill="rgba(255,0,0,.5)" mask="url(#mask)" />
</svg>

Hide result

Answer 3

Try using:

img {
 -webkit-filter: invert(100%);  
}