Javascript 我有一个白色图标-如何使其变为黑色而不替换为画布？它是一个.png图标

我正在寻找一个脚本/库，我可以使用它对一些图标图像应用过滤器。它们是白色的，我希望它们是黑色的。我有一些限制：

• 我无法为它创建新的png
• 我无法更改实现（因此我无法使用其他图标，如FontAwesome等）
• 我必须使用相同的

  myicon.png

  是一个白色图标，我想在浏览器中将其设置为黑色。如何实现这一点（使用CSS或JS）并保持相同的HTML结构和元素

  ---

  修复： 请注意，有两个答案解决了这个问题。不幸的是，我只能接受一个答案。因此，它们是：
  ---

  这可能是对您最初想法的一点改变，但您是否考虑过改用它？改变字体颜色比重画图像要快得多。
  这可能是对您最初想法的一点改变，但您是否考虑过改用它？更改字体颜色比重画图像要快得多。
  因为您不需要支持IE，所以可以使用此CSS过滤器：

  <div class="icon">
      <img src="myicon.png" data-activepath="activemyicon.png">
  </div>
  

  。图标img{
  过滤器：url（“数据：image/svg+xml；utf8，#invert”）；
  -webkit过滤器：倒置（100%）；
  过滤器：倒置（100%）；
  }
  

  ---

  这也适用于当前版本的firefox。
  因为您不需要支持IE，所以可以使用此CSS过滤器：

  <div class="icon">
      <img src="myicon.png" data-activepath="activemyicon.png">
  </div>
  

  。图标img{
  过滤器：url（“数据：image/svg+xml；utf8，#invert”）；
  -webkit过滤器：倒置（100%）；
  过滤器：倒置（100%）；
  }
  

  ---

  这也适用于当前版本的firefox。
  我真的不明白为什么在您可以更改js时不能使用

  canvas

  。
  因此，如果您可以在服务器上保存图标，您可以尝试以下代码：

  .icon img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix type=\'matrix\' values=\'-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0\'/></filter></svg>#invert");
    -webkit-filter:invert(100%);
    filter: invert(100%);
  }
  

  功能更改imgcolor（img）{
  var can=document.createElement（'canvas'）；
  can.width=img.width；
  can.height=img.height；
  var ctx=can.getContext（'2d'）；
  ctx.drawImage（img，0,0）；
  var imageData=ctx.getImageData（0,0，img.width，img.height）；
  var数据=imageData.data；
  var c=255；
  对于（变量i=0；i

  检查

  ---

  Ps：您可能必须点击“运行”才能在结果中加载图标
  我真的不明白为什么在您可以更改js时不能使用

  canvas

  。
  因此，如果您可以在服务器上保存图标，您可以尝试以下代码：

  .icon img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix type=\'matrix\' values=\'-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0\'/></filter></svg>#invert");
    -webkit-filter:invert(100%);
    filter: invert(100%);
  }
  

  功能更改imgcolor（img）{
  var can=document.createElement（'canvas'）；
  can.width=img.width；
  can.height=img.height；
  var ctx=can.getContext（'2d'）；
  ctx.drawImage（img，0,0）；
  var imageData=ctx.getImageData（0,0，img.width，img.height）；
  var数据=imageData.data；
  var c=255；
  对于（变量i=0；i

  检查

  ---

  Ps：您可能需要点击“运行”按钮才能在结果中加载图标
  它只能在chrome上运行

  function changeImgColor(img) {
      var can = document.createElement('canvas');
      can.width = img.width;
      can.height = img.height;
      var ctx = can.getContext('2d');
      ctx.drawImage(img, 0, 0);
      var imageData = ctx.getImageData(0, 0, img.width, img.height);
      var data = imageData.data;
      var c = 255;
      for (var i = 0; i < data.length; i += 4) {
          if (data[i] == c && data[i + 1] == c && data[i + 2] == c) {
              data[i] = 0;
              data[i + 1] = 0;
              data[i + 2] = 0;
          }
  
          // overwrite original image
          ctx.putImageData(imageData, 0, 0);
      }
      var newdata = can.toDataURL("image/png");
      img.src = newdata;
  }
  changeImgColor(document.getElementsByTagName('img')[0]);
  

  ---

  它只能用铬

  function changeImgColor(img) {
      var can = document.createElement('canvas');
      can.width = img.width;
      can.height = img.height;
      var ctx = can.getContext('2d');
      ctx.drawImage(img, 0, 0);
      var imageData = ctx.getImageData(0, 0, img.width, img.height);
      var data = imageData.data;
      var c = 255;
      for (var i = 0; i < data.length; i += 4) {
          if (data[i] == c && data[i + 1] == c && data[i + 2] == c) {
              data[i] = 0;
              data[i + 1] = 0;
              data[i + 2] = 0;
          }
  
          // overwrite original image
          ctx.putImageData(imageData, 0, 0);
      }
      var newdata = can.toDataURL("image/png");
      img.src = newdata;
  }
  changeImgColor(document.getElementsByTagName('img')[0]);
  

  ---

  ---

  你能举个例子吗？完成了！我还修复了标题，但有一个错误。并非所有的

  过滤器都在Firefox中工作，但其中一些是：）你能解释一下为什么不能使用FontAwesome吗？@rvervourt显然是因为我有一组FontAwesome不包含的特殊图标。你知道有什么
  过滤器可以解决Firefox中的这种情况吗？我知道你不能用
  元素替换你的
  元素，但你肯定可以使用一个你永远不会附加到页面上的画布元素，执行你需要执行的操作，然后将图像数据放入
  元素？您能提供一个示例吗？完成！我还修复了标题，但有一个错误。并非所有的
  过滤器都在Firefox中工作，但其中一些是：）你能解释一下为什么不能使用FontAwesome吗？@rvervourt显然是因为我有一组FontAwesome不包含的特殊图标。你知道有什么
  过滤器可以解决Firefox中的这种情况吗？我知道你不能用
  元素替换你的
  元素，但你肯定可以使用一个你永远不会附加到页面上的画布元素，执行你需要执行的操作，然后将图像数据放入
  元素？感谢您的响应，但正如我所说，我无法更改实现方法。FontAwesome是一项巨大的资产，但在这种情况下对我没有帮助。您对如何实现这一点有什么想法吗？感谢您的回复，但正如我所说的，我无法更改实现方法。FontAwesome是一项巨大的资产，但在这种情况下对我没有帮助。你对如何实现这一点有什么想法吗？事实上，我可以看到它在firefox 32.0.3中工作。这里有一个测试。你是对的，我接受了这个答案，因为它没有JS版本那么重。谢谢事实上，我可以看到它在firefox 32.0.3中工作。这里有一个测试示例。你是对的，我接受了这个答案，因为它没有JS版本那么重。谢谢谢谢！这回答了我的问题。我希望我没有浪费你太多的时间。不过还有一件事。。。如何将需要转换的所有图标作为参数发送