將背景圖像轉換爲灰度 - 在飛行

我似乎無法找到我正在尋找什麼，所以也許你們中的一個人可以幫助我。將背景圖像轉換爲灰度 - 在飛行

我試圖將div的背景圖像從顏色轉換爲灰度。上傳它的一個版本不是一種選擇，因爲這將是每天數百萬張照片，並且存儲容量可能很大。

這些圖像以彩色方式存儲在Facebook上，我想抓住它們並將它們更改爲灰度並顯示它們，或者將整個容器覆蓋灰度或類似的東西。

任何想法/解決方案？

這可以使用HTML5畫布完成。

2011-12-27 ehftwelve

只是爲了澄清，你試圖用Canvas來做，或者你可以在畫布上做，而你試圖在JS中做到這一點？ – 2011-12-27 20:17:15

[將圖像轉換爲HTML/CSS中的灰度]可能的副本（http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css） – robertc 2011-12-27 20:45:07

@robertc im不確定該解決方案是跨域的能力雖然 – ehftwelve 2011-12-27 20:52:57

我以前使用過這方面的資料，取得了一些成功。唯一的限制是灰度圖像必須與腳本位於同一臺服務器上。似乎跨瀏覽器工作，而原生支持（這是任何非IE）：

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

來源

2011-12-27 20:21:37 mattacular

問題是，它絕對不在同一臺服務器或域上。我想我可以創建一個代理腳本來爲我抓取它 – ehftwelve 2011-12-27 20:43:53

讓我們試試這個方法：

var divid = $('#DIVID'); 
var currentBG = divid.css('background-image'); 
divid.html('<img src="'+currentbg+'" class="grescaled" />'); 
divid.css('background-image', '');

通過做好以上，您實際提取的背景圖像那個特定的DIV，將背景重置爲'Nothing'，然後在同一個DIV中插入一個動態IMG標籤，顯示的圖像相同，但是這次使用CSS類灰度。

在你的CSS文件，添加以下行：

.greyscaled { filter: url(/filters.svg#grayscale); filter: gray; -webkit-filter: grayscale(1); }

現在，創建你的文檔根文件名爲filters.svg，下面這實際上會做，所含IMG效果的內容。

<svg xmlns="http://www.w3.org/2000/svg"> 
<filter id="grayscale"> 
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" /> 
</filter> 
</svg>

以防萬一你要到位的onmouseout一切，你可以扭轉你的行爲的onmouseout把IMG回DIV的背景。

來源

2012-02-26 00:20:06

將背景圖像轉換爲灰度 - 在飛行

回答

相關問題