GoodProgrammerweb前端分享使用CSS和JS搭建一个简单的图片编辑器，本文主要使用CSSfilter和简单的Jquery代码来实现一个简单的图片编辑器，包括调整图片的透明度、黑白、亮度。 CSS滤镜 先说滤镜吧。首先，让我们来解释一下过滤器。用CSS实现filter其实很简单。使用类似于以下的语句： 1..example{2. filter:[];3. } 比如我们给图片加一点灰度（grayscale）特效，可以像this:1. .example{2.?filter:grayscale(90%);3. } 当然为了浏览器兼容性，我们最好这样写：1..example{2. -webkit-filter:灰度(90%);3. filter:灰度(90%));4. } 需要注意的是，过滤器的属性值的单位通常可能是从0到1，但有些不是这样的。例如，blur使用像素'px'作为单位，而hue-rotate使用角度deg作为单位。基本单位;1. .example{2. filter:blur(10px);3. }4. .example-2{5. filter:hue-rotate(90deg);6. } 但是如果一次只能用一个滤镜就麻烦了，所以CSS提供了更方便的书写形式，直接并排写：1. .example{2. filter:grayscale(0.5)blur(10px);3. } 这样一个元素可以添加多个滤镜属性。 简单介绍了滤镜之后，让我们来创建一个简单的图像编辑器。创建一个基本的HTML文件 这里我们创建一个index.html，代码比较简单：1. ImageEditor2. 灰度3. 模糊4. 亮度5. 对比度6. 色调旋转7. 不透明度8. Invert9. Saturate10. Sepia This在文件中，我们引入了main.css和main.js。main.css实际上起到了编辑器布局的作用，实际上并不影响图片的滤镜效果。我们做的是一个编辑器，所以当用户改变一个过滤器的值时，我们可以让用户实时看到效果，所以实现过滤器的代码应该放在main.js中。 上面每个 元素下面的 是滤镜的一个属性设置，因为我们可以同时使用多个滤镜来对图片产生特效，所以每个滤镜的属性值设置为一个可调状态。 上面的index.html应该也说明了我们在顶部提供了一个输入框，用来给用户输入图片的URL。当用户点击回车时，我们会在编辑区显示图片。使用了如下简单的js代码：1. functionaddImage(e){2. varimgUrl=$("#imgUrl").val();3. if(imgUrl.length){4. $("#imageContainerimg").attr("src",imgUrl);5. }6. e.preventDefault();7. }8. //按下回车，addImage()会调用9. $("#urlBox").submit(addImage); 上面的js代码也写到了main.js中。js之中。用户可以自己添加图片后，我们就可以对图片进行编辑了： 每次用户滑动进度条，我们都可以给用户展示效果，所以我们监听用户的mousemove事件：1. $("input[type=range]").mousemove(editImage); 也就是说，用户每移动一次控制条，我们就执行一次editImage函数。 但是这样的体验可能不是最好的，因为当用户的鼠标离开控制栏的时候，我们也可以监听change事件，将此时的change交给editImage函数，所以上面的代码可以写成这样：1.fontsize="3">$("input[type=range]").mousemove(editImage).change(editImage);2. 复制代码，写editImage函数3. 上面我们把input[type=range]的mousemove和change事件交给了editImage函数，所以我们来写吧editImage的函数代码：4. functioneditImage(){5. vargs=$("#gs").val();//灰度6. varblur=$("#blur").val();//模糊7. varbr=$("#br").val();//亮度8. varct=$("#ct").val();//对比度9. varhuer=$("#huer").val();//色调旋转10. varopacity=$("#opacity").val();//不透明度11. varinvert=$("#invert").val();//反转12. varsaturate=$("#saturate").val();//饱和13. varsepia=$("#sepia").val();//深褐色14. $("#imageContainerimg").css("filter",'grayscale('+gs+15. '%)blur('+blur+16. 'px)brightness('+br+17. '%)contrast('+ct+18. '%)hue-rotate('+huer+19. 'deg)opacity('+opacity+20. '%)反转('+反转+21. '%)饱和('+饱和+22. '%)sepia('+sepia+'%)');23. $("#imageContainerimg").css("-webkit-filter",'grayscale('+gs+24. '%)blur('+blur+25. 'px)亮度('+br+26. '%)对比度('+ct+27. '%)hue-rotate('+huer+28. 'deg)opacity('+opacity+29. '%)反转('+反转+30. '%)饱和('+饱和+31. '%)sepia('+sepia+'%)');32. } 其实很简单。每次用户滑动控制条时，我们通过vargs=$("#gs").val();这样的语句获取对应的值。然后使用Jquery的css()方法直接给图片加上滤镜效果，相信大家也看出来这个功能的后半部分是为了实现浏览器兼容1. $("#imageContainerimg").css("-webkit-filter",...)2. 复制代码3. 这段代码其实在img元素中实现了类似下面这样的效果；4. 5.img=28,30 最后，如果不想给图片加点特效，可以点击reset，将图片重置为原来的状态：1.2. $('#imageEditor').on('reset',function(){3. setTimeout(function(){4. editImage();5. },0);6. }); 这里需要说明的是，这里的setTimeout函数是为了尽快显示reset的效果，如果这样写在下面的rm:1.$('#imageEditor').on('reset',function(){2. editImage();3. }); 这个时候reset效果的执行其实有点延迟，可以明显看到等待的时候，不是很快。 浏览器打开index.html，可以看到相应的调整效果。可以拖动一些设置项的控制条来查看效果。
