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

【问题标题】：convert background image to grayscale - on the fly将背景图像转换为灰度 - 即时
【发布时间】：2012-01-28 17:58:53
【问题描述】：

我似乎无法找到我正在寻找的确切内容，所以也许你们中的一个可以帮助我。

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

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

有什么想法/解决方案吗？

这可以使用 HTML5 画布来完成。

【问题讨论】：

澄清一下，您是在尝试使用 Canvas 来完成，还是您可以在 canvas 中完成，而您正在尝试在 JS 中完成？
Convert an image to grayscale in HTML/CSS的可能重复
@robertc 我不确定该解决方案是否支持跨域
@robertc 这是用于制作图像的。我想做背景图，试过了还是不行
@DanCrews 我的意思是画布是一个选项，但不是必需的。任何最好的方法都是首选

标签： javascript image html image-processing

【解决方案1】：

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

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

【讨论】：

问题是肯定不在同一个服务器或域上。我想我可以创建一个代理脚本来为我抓取它

【解决方案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 类灰度化。

在您的 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>

以防万一您想在鼠标输出上放置所有内容，您可以在鼠标输出上反转您的操作，将 IMG 放回 DIV 的背景中。

【讨论】：