怎么用CSS和JS打造一个简单的图片编辑器

本篇内容介绍了“怎么用CSS和js打造一个简单的图片编辑器”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

　　CSS filter

　　我们首先来探讨一下filter。

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

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>

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

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>

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

1. <font size="3">　.example {</font>

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

3. <font size="3">　　}</font>

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

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

　　创建基本的html文件

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

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>

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

　　上面的每一个

　　下面的

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

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

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>

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

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

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

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

　　但是这样的体验可能还不是最好，因为在最后用户的鼠标离开控制条的时候，我们还可以监听change事件，把这一刻的变化也交给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>

　　其实很简单，我们在每次用户滑动控制条的时候，我们就通过类似var gs = $("#gs").val();的语句取得相对应地值，然后通过Jquery的css()方法直接为图片加上filter效果，而且相信你也看得出来，这个函数的后半段就是实现浏览器兼容的

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>

　　最后，如果你不想将某些特效加到图片上面去，你可以点reset然后将图片重置到原始状态：

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>

　　这里需要说明一下的是，这里的setTimeout函数就是为了将reset的效果最快地展现出来，如果写成下面的形式：

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

2. <font size="3">　　editImage();</font>

3. <font size="3">　　});</font>

　　这个时候，reset效果执行起来其实是有一点延迟的，你明显可以看到等待的时候，它并不是很快。

　　浏览器打开index.html，就可以看到相应的调节效果了。你可以拖动一些设置项的控制条来查看效果。

“怎么用CSS和JS打造一个简单的图片编辑器”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！