有没有办法通过CSS或jQuery反转png图像的颜色？

Question

我正在制作基于SoundCloud API的音乐播放器。并希望使用波形图像。但SoundCloud提供的波形并不适合我的需要。事实上，波浪是透明的，周围有白色。我想通过背景图像填充波浪并从波浪周围移除白色。

以下是SoundCloud的Waveform示例：http://w1.sndcdn.com/ZnIW9DSkAhPU_m.png

附图是我要找的：

我可以找到一些像使用的线索：

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

或HTML5 Canvas但我无法将它们变成我想要的。还有波形.js，但它只采用颜色而不是图像作为波形的颜色。

有什么想法吗？

Answer 1

我不确定您是否允许使用ImageMagick解决方案，但您可以在PHP中执行此操作，然后将其发送到您的浏览器...

步骤1：让你的wave.png文件包含真（255）个白色（所以我们可以在第3步删除它们）

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

第2步：用波浪合成你的爱因斯坦

composite w1.png einstein.jpg x.png

步骤3：用透明的像素替换所有白色像素，并将其保存为out.png

convert x.png -transparent white out.png

ImageMagick是免费的，功能强大且可用here。

请注意，最后两个步骤可以简化为一个步骤，如下所示：

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

我没有太多关于几何匹配的问题; - ）

Answer 2

是的，有

在下面或jsFiddle

上尝试

使用嵌入式svg元素可以解决问题，使用它可以执行必要的图像转换

的步骤

1. 将波形图像转换为黑色＆amp;白色图片
2. 使用上面的b＆amp; w图像
创建遮罩
3. 将遮罩应用于背景图像
4. 使用相同的蒙版添加其他进度元素

/* 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>

Answer 3

尝试使用：

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