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

【问题标题】：How to convert an Image to Grayscale in CSS/JAVASCRIPT如何在 CSS/JAVASCRIPT 中将图像转换为灰度
【发布时间】：2014-10-30 11:16:42
【问题描述】：

我希望在 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");

这在 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 中读取整个图像并将每个像素转换为灰度？

【问题讨论】：

要么放弃 IE 支持，要么在您的服务器上转换文件，我没有看到其他解决方案。放弃 IE 似乎是最好的：无论如何，除非是公司，否则人们使用 IE。现在只是不明白网络是关于什么的......
不知道这是否适用于 SVG 图像，但您可以尝试 DXImageTransform.Microsoft.BasicImage(grayscale=1)。否则，你应该试试谷歌； javascript grayscale image 返回大量点击。
@Palpatim 没有帮助谷歌搜索。
@GameAlchemist 需要 IE 支持。大约 20% 的用户使用它。没办法。

标签： javascript jquery css svg html5-canvas

【解决方案1】：

您的过滤器有些奇怪，可能会导致问题。您的过滤器应该是：

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

【讨论】：

这没有帮助。它创建了一个图像。我希望它是背景图像。有什么方法可以使用 Javascript 提取 Base-64 格式的数据并应用背景图像？