如何在CSS/JAVASCRIPT中将图像转换为灰度

我希望在Javascript/CSS中将图像（设置为背景）转换为灰度

这里的问题是用于灰度的CSS3过滤器在IE中不起作用 由于图像是跨域资源，我无法从画布读取数据。 我的目标浏览器是Firefox、Chrome、IE10等

我试过使用下面的

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); 

filter:url（“数据：image/svg+xml；utf8，#灰度”）；

这在IE10和IE11中不起作用

<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
  <defs>
     <filter id="filtersPicture">
       <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
       <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
    </filter>
  </defs>
  <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="whateverpathtoimage.jpg" />
</svg> 

我无法将此SVG设置为div的背景图像

---

有没有SVG解决方案？或者，如果有人知道如何用javascript读取整个图像，并将每个像素转换为灰度，则可能会出现问题。

您的过滤器有一些奇怪之处。您的过滤器应为：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 377" width="400px" height="377px">
  <defs>
     <filter id="filtersPicture">
       <feColorMatrix type="saturate" values="0"/>
    </filter>
  </defs>
  <image filter="url(#filtersPicture)" x="0" y="0" width="400" height="377"  xlink:href="whateverpathtoimage.jpg" />
</svg>

要么放弃IE支持，要么在服务器上转换文件，我看不到其他解决方案。放弃IE似乎是最好的选择：不管怎样，除非是公司，否则现在使用IE的人根本不了解web的内容……不知道这是否适用于SVG图像，但你可以尝试

DXImageTransform.Microsoft.BasicImage（grayscale=1）

。否则，你应该试试谷歌<代码>javascript灰度图像返回大量命中率。@帕尔帕蒂姆无法帮助谷歌搜索。@需要游戏炼金术士IE支持。大约20%的用户使用它。没办法，这没用。它创造了一个形象。我希望它是一个背景图像。我可以用Javascript提取Base-64格式的数据并应用背景图像吗？