Question

我似乎无法找到我想要的东西，所以也许你们中的一个可以帮助我。

我正在尝试将div的背景图像从彩色转换为灰度。上传它的版本不是一种选择，因为这将是每天数百万张照片，并且存储容量可能很大。

这些图像以彩色存储在Facebook上，我想抓住它们并将它们更改为灰度并显示它们，或者可能将整个容器覆盖在灰度级或类似的东西上。

任何想法/解决方案？

这可以使用HTML5画布完成。

Answer 1

我过去曾使用过来源的信息取得了一些成功。唯一的限制是灰度图像必须与脚本位于同一服务器上。似乎在没有本机支持的浏览器中工作（这是任何非IE）：

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

Answer 2

让我们尝试这种方法：

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

通过执行上述操作，您实际上提取了特定DIV的背景图像，将背景重置为“无”，然后在显示相同图像的同一DIV中插入动态IMG标记，但这次使用CSS类< EM> greyscaled

在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的背景中。

将背景图像转换为灰度 - 即时

2 个答案: