jquery css(filter_'gray'),用CSS Filters和jQuery搭建一个简单的图片编辑器

CSS Filters(滤镜)是一个功能强大的工具去处理图片。不需要使用外部的工具，你可以在所有的浏览器里对图片实现应用各种特效。

CSS Filters组成了一个大的主题，我在这里不打算讨论所有的有效滤镜。我将要说的是如何让不同的滤镜生成一个复杂的效果，同时生成一个属于你的图像处理器。

如果你想更深入的研究，去查看Filters on MDN或Understanding CSS Filter Effects(on HTML5 Rocks)，两个链接都包含了一般滤镜的更多细节说明。

CSS Filter Syntax

用CSS生成一个滤镜效果只需要使用 filter: 属性，并在冒号后面添加滤镜名称，如grayscale、blur等等。

下面对一个元素应用一个90%灰度的滤镜：

在webkit浏览器下你需要加上一个前缀：

通常一个滤镜的值在0到1之间，但是也有一些例外。比如blur滤镜的属性就是用pixel单位并且为整数。同样的，hue-rotate滤镜的属性是使用deg单位并且为整数。

多重滤镜(Combining Multiple Filters)

你可以复合使用滤镜。如果你希望应用复数的滤镜，你可以在一行语句中使用一个空格来分隔不同的滤镜。下面是组合使用了grayscale和blur滤镜：

搭建图片编辑器

我们的图片编辑器有两个部分：

1. 一个URL输入框和一个图片框，这能允许我们加载一个外部的URL连接。

2. 对图片分别控制不同特效的控制器。

URL输入框和图片框

我们使用两个表单元素去获取一个图片URL，一个是文本输入和一个确认按钮。然后我们通过它获取到图片，并显示在imageContainer的div里。

HTML代码

jQuery代码

控制器

我们应用的核心就是控制器，而它也是真正对原始图片进行操作的部分。

我们需要使用范围选择器去设置不同滤镜的值。这也允许我们去实时观察效果的改变。这里有一段代码，它添加了两个选择器，一个是grayscal另一个是blur(在本例中只有2个选项，而源代码中则有9个选项)。

HTML代码

当我们用应用CSS Filters的效果是，我们需要数值改变的时候效果也一同改变，所以用下面的jQuery实现：

jQuery代码

无论何时调整控制器的滑块(slider)，editImage()方法都会立即响应。editImage()会先储存控制器滑块的数值(gs和blur)，然后应用到图片中去。

记住重要的一点，注意你使用的滤镜是否使用特殊单位。你可以看到上面的代码，grayscale()滤镜使用了“%”而blur()滤镜使用了“px”。

现在你可以根据上面的代码添加所有的滤镜并得到你自己的图片编辑器。

实例和全部代码

现在你可以意识到CSS的力量了，你应该在下一个项目中试试给filter一个属性。如果你感兴趣，你可以尝试给这个图片编辑器增加以下功能：

1. 从本地上传一张图片。

2. 下载修改好的图片。

原文翻译自http://www.sitepoint.com/build-simple-image-editor-with-css-filters-jquery/

如有问题欢迎指正。