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

1. <font size="3">.example {</font>
2. <font size="3">　　filter: [];</font>
3. <font size="3">　　}</font>

             <font size="3">比如说，我们给图片添加一点灰度(grayscale)特效，就可以这样：</font>

1. <font size="3">　　.example {</font>
2. <font size="3">　　filter: grayscale(90%);</font>
3. <font size="3">　　}</font>

1. <font size="3">.example {</font>
2. <font size="3">　　-webkit-filter: grayscale(90%);</font>
3. <font size="3">　　filter: grayscale(90%);</font>
4. <font size="3">　　}</font>

1. <font size="3">　.example {</font>
2. <font size="3">　　filter: blur(10px);</font>
3. <font size="3">　　}</font>
4. <font size="3">　　.example-2 {</font>
5. <font size="3">　　filter: hue-rotate(90deg);</font>
6. <font size="3">　　}</font>

1. <font size="3">　.example {</font>
2. <font size="3">　　filter: grayscale(0.5) blur(10px);</font>
3. <font size="3">　　}</font>

1. <font size="3">　Image Editor</font>
2. <font size="3">　　Grayscale</font>
3. <font size="3">　　Blur</font>
4. <font size="3">　　Brightness</font>
5. <font size="3">　　Contrast</font>
6. <font size="3">　　Hue Rotate</font>
7. <font size="3">　　Opacity</font>
8. <font size="3">　　Invert</font>
9. <font size="3">　　Saturate</font>
10. <font size="3">　　Sepia</font>

1. <font size="3">　function addImage(e) {</font>
2. <font size="3">　　var imgUrl = $("#imgUrl").val();</font>
3. <font size="3">　　if (imgUrl.length) {</font>
4. <font size="3">　　$("#imageContainer img").attr("src", imgUrl);</font>
5. <font size="3">　　}</font>
6. <font size="3">　　e.preventDefault();</font>
7. <font size="3">　　}</font>
8. <font size="3">　　//on pressing return, addImage() will be called</font>
9. <font size="3">　　$("#urlBox").submit(addImage);</font>

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

1. font size="3">$("input[type=range]").mousemove(editImage).change(editImage);</font>
2. <font size="3">　　复制代码编写editImage函数</font>
3. <font size="3">　　上面我们将input[type=range]的mousemove和change事件交给了editImage函数处理，所以，我们来编写一下editImage的函数代码：</font>
4. <font size="3">　　function editImage() {</font>
5. <font size="3">　　var gs = $("#gs").val(); // grayscale</font>
6. <font size="3">　　var blur = $("#blur").val(); // blur</font>
7. <font size="3">　　var br = $("#br").val(); // brightness</font>
8. <font size="3">　　var ct = $("#ct").val(); // contrast</font>
9. <font size="3">　　var huer = $("#huer").val(); //hue-rotate</font>
10. <font size="3">　　var opacity = $("#opacity").val(); //opacity</font>
11. <font size="3">　　var invert = $("#invert").val(); //invert</font>
12. <font size="3">　　var saturate = $("#saturate").val(); //saturate</font>
13. <font size="3">　　var sepia = $("#sepia").val(); //sepia</font>
14. <font size="3">　　$("#imageContainer img").css("filter", 'grayscale(' + gs+</font>
15. <font size="3">　　'%) blur(' + blur +</font>
16. <font size="3">　　'px) brightness(' + br +</font>
17. <font size="3">　　'%) contrast(' + ct +</font>
18. <font size="3">　　'%) hue-rotate(' + huer +</font>
19. <font size="3">　　'deg) opacity(' + opacity +</font>
20. <font size="3">　　'%) invert(' + invert +</font>
21. <font size="3">　　'%) saturate(' + saturate +</font>
22. <font size="3">　　'%) sepia(' + sepia + '%)');</font>
23. <font size="3">　　$("#imageContainer img").css("-webkit-filter", 'grayscale(' + gs+</font>
24. <font size="3">　　'%) blur(' + blur +</font>
25. <font size="3">　　'px) brightness(' + br +</font>
26. <font size="3">　　'%) contrast(' + ct +</font>
27. <font size="3">　　'%) hue-rotate(' + huer +</font>
28. <font size="3">　　'deg) opacity(' + opacity +</font>
29. <font size="3">　　'%) invert(' + invert +</font>
30. <font size="3">　　'%) saturate(' + saturate +</font>
31. <font size="3">　　'%) sepia(' + sepia + '%)');</font>
32. <font size="3">　　}</font>

1. <font size="3">　$("#imageContainer img").css("-webkit-filter",...)</font>
2. <font size="3">　　复制代码</font>
3. <font size="3">　　这段代码其实就是在img元素实现了类似下面的效果;</font>
4. <font size="3">　　</font>
5. <font size="3">[img=28,30][/img]</font>

1. <font size="3">
2. $('#imageEditor').on('reset', function () {</font>
3. <font size="3">　　setTimeout(function() {</font>
4. <font size="3">　　editImage();</font>
5. <font size="3">　　},0);</font>
6. <font size="3">　　});</font>

1. <font size="3">$('#imageEditor').on('reset', function () {</font>
2. <font size="3">　　editImage();</font>
3. <font size="3">　　});</font>