如何在CSS / JAVASCRIPT中將圖像轉換為灰度

Question

我希望將圖像（設置為背景）轉換為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中讀取整個圖像並將每個像素轉換為灰度？

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