好程序员web前端分享用CSS和JS打造一个简单的图片编辑器

好程序员web前端分享用CSS和JS打造一个简单的图片编辑器

好程序员web前端分享用CSS和JS打造一个简单的图片编辑器，本文主要是利用CSS的filter和简单的Jquery代码来实现一个简单的图片编辑器，包括对图片的透明度，黑白，图片亮度等调节。

CSS filter

我们首先来探讨一下filter。

首先来说明一下filter，在CSS里面要实现filter，其实很简单，使用类似下面的声明方式：

1..example{

2.filter:[];

3.}

比如说，我们给图片添加一点灰度(grayscale)特效，就可以这样：

1..example{

2.filter:grayscale(90%);

3.}

当然，为了浏览器兼容，我们最好这样写：

1..example{

2.-webkit-filter:grayscale(90%);

3.filter:grayscale(90%);

4.}

需要注意的是：filter的属性值的单位通常可能是从0到1之间，但是有些不是这样的，比如blur是使用像素'px'来作为单位的，而hue-rotate则使用角度deg来作为基本单位;

1..example{

2.filter:blur(10px);

3.}

4..example-2{

5.filter:hue-rotate(90deg);

6.}

但是如果每次只能使用一个filter就比较麻烦了，所以CSS提供了更加方便的书写形式，直接并排着写：

1..example{

2.filter:grayscale(0.5)blur(10px);

3.}

这样就可以实现对一个元素添加多个filter属性。

简单地说完filter之后，我们来动手创建一个简单的图片编辑器。

创建基本的HTML文件

在这里我们创建一个index.html，代码也比较简单：

1.Image Editor

2.Grayscale

3.Blur

4.Brightness

5.Contrast

6.Hue Rotate

7.Opacity

8.Invert

9.Saturate

10.Sepia

这个文件里，我们引入了main.css和main.js，main.css其实是对编辑器的一些排版起的作用，并没有对图片的filter效果做出实际的影响，我们做的是编辑器，所以在用户改变某个filter的值的时候，我们可以实时让用户看到效果，于是这些实现filter的代码应该就放在main.js里面。

上面的每一个

下面的

元素下面的input都是filter的一个属性设置，因为我们可以同时用多个filter来对图片产生特效，所以我每个filter的属性值都设置为可以调节的状态。

上面的index.html还要说明的是，在最上面我们提供一个输入框，用于给用户输入图片的URL，当用户点击回车的时候，我们就将这张图片显示到编辑区域。使用的是下面的简单js代码：

1.function addImage(e){

2.var imgUrl=$("#imgUrl").val();

3.if(imgUrl.length){

4.$("#imageContainer img").attr("src",imgUrl);

5.}

6. e.preventDefault();

7.}

8.//on pressing return,addImage()will be called

9.$("#urlBox").submit(addImage);

上面的js代码也是写到main.js当中。有了可以用户自己添加图片之后，我们就可以实现对图片的编辑了：

每次用户在滑动进度条的时候，我们就可以将效果展示给用户看，于是我们来监听用户的mousemove事件：

1.$("input[type=range]").mousemove(editImage);

也就是说，每次用户在移动控制条的时候，我们都执行editImage函数。

但是这样的体验可能还不是最好，因为在最后用户的鼠标离开控制条的时候，我们还可以监听change事件，把这一刻的变化也交给editImage函数处理，所以可以将上面的代码写成这样：

1.font

size="3">$("input[type=range]").mousemove(editImage).change(editImage);

2.复制代码编写editImage函数

3.上面我们将input[type=range]的mousemove和change事件交给了

editImage函数处理，所以，我们来编写一下editImage的函数代码：

4.function editImage(){

5.var gs=$("#gs").val();//grayscale