javascript模糊图像答案

【问题标题】：javascript blur on imagesjavascript模糊图像
【发布时间】：2012-03-23 08:50:02
【问题描述】：

是否有除 Pixastic 或 jquery 扩展之外的 javascript 库来模糊图像？

情况： 我有一页搜索结果。结果由一群用户组成。这些用户拥有隐藏在按钮下的图像列表 (display: none;)。其中一些图像列表是私有的。图像的私人列表需要被模糊化。

尝试： 我已经尝试过那个仅限 firefox 的 css 技巧，但这似乎不起作用。我已经尝试过 Pixastic 的库、快速模糊以及普通模糊，但是这首先给了我一个错误，因为我传递了一个 jquery 对象。但是当我将它更改为 DOM 对象时，它就不起作用（但没有给出更多错误）。我终于去尝试使用他们实际演示中使用的代码（通过 firebug 获得），在 js 中创建图像，创建模糊效果处理程序并附加图像，但这只是附加图像，而不是模糊。

规格： 我在coldfusion工作，所以我要试试ImageBlur()，但由于这必须在搜索结果页面中，模糊那么多图像服务器端可能不是一个好主意..

更新： 我正在尝试使用 blur.js，这似乎工作正常。但是当我第二次调用使用的函数 (jqueryelement.blurjs();) 时，我的第一张图像不会变得模糊（它确实被库处理并获得正确大小的背景，但没有图像），但是第二张一个。如果我动态构建 javascript 字符串服务器端，这意味着只有最后一个图像变得模糊..：\

【问题讨论】：

标签： javascript image coldfusion motion-blur

【解决方案1】：

这里有一些做模糊的指针：

Gaussian Blur onHover Using jQuery

尤其是 Quasimodo 的回答，他在这个 jQuery 插件中使用了一个模糊函数：

http://blurjs.com/

【讨论】：

我正在尝试让 blur.js 工作。但是当我尝试在$(document).ready(); 使用element.blurjs(); 2 次时，只有最后一个图像得到模糊覆盖，第一个得到背景，但它不包含图像..

【解决方案2】：

您始终可以使用半新的 CSS3 filter 属性。

filter: blur(10px);

过滤器是完全可动画的，并且适用于大多数浏览器（如您所见here，除 IE 之外的所有浏览器）。此外，大多数浏览器都需要 -webkit- 前缀。

jsfiddle

【讨论】：