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

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

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

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

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

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

【问题讨论】:

  • 澄清一下,您是在尝试使用 Canvas 来完成,还是您可以在 canvas 中完成,而您正在尝试在 JS 中完成?
  • @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 的背景中。

【讨论】:

    猜你喜欢
    • 2019-04-26
    • 1970-01-01
    • 2016-11-10
    • 2010-11-20
    • 2013-04-26
    相关资源
    最近更新 更多