如何轉換圖像中的CSS灰度/ JAVASCRIPT

我想要的圖像（設置爲背景）轉換中的JavaScript/CSS爲灰度如何轉換圖像中的CSS灰度/ JAVASCRIPT

這裏的問題是，灰度CSS3過濾器不工作， IE 由於圖像是跨域資源，我無法從畫布中讀取數據。我的目標瀏覽器是火狐，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中的整個圖像並將每個像素轉換爲灰度？

來源

2014-09-05 Akshay Khandelwal

要麼刪除IE支持或讓您的服務器上的文件轉換，我沒有看到其他解決方案。放棄IE似乎是最好的：反正除非企業，人們使用I.E.現在只是沒有得到什麼網絡... – GameAlchemist 2014-09-05 14:29:56

不知道這是否適用於SVG圖像，但你可以嘗試'DXImageTransform.Microsoft.BasicImage（灰度= 1）'。否則，你應該嘗試Google; 'javascript灰度圖像'返回大量命中。 – Palpatim 2014-09-05 14:50:39

@Palpatim沒有幫助谷歌搜索。 – 2014-09-08 08:54:13

你的過濾器有一些奇怪的可能會導致問題。您的過濾器應該是：

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

來源

2014-09-05 15:59:40

這沒有幫助。它創建了一個圖像。我希望它是一個背景圖像。任何方式，我可以使用Javascript提取Base-64格式的數據並應用背景圖片？ – 2014-09-08 08:55:27

如何轉換圖像中的CSS灰度/ JAVASCRIPT

回答

相關問題