javascript在图像上模糊

javascript blur on images

本文关键字：模糊图像 javascript 更新时间：2023-09-26

除了Pixastic或jquery扩展之外，还有其他javascript库可以模糊图像吗？

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

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

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

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

这里有一些进行模糊处理的指针：

使用jQuery 的高斯模糊悬停

特别是Quasimodo的回答，他制作了一个模糊函数，用于这个jQuery插件：

http://blurjs.com/

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

filter: blur(10px);

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

jsfiddle