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

最新推荐文章于 2024-06-17 20:07:46 发布

powerx_yc

最新推荐文章于 2024-06-17 20:07:46 发布

阅读量2.7k

点赞数

文章标签： javascript 前端移动开发 ViewUI

原文链接：https://juejin.im/post/5cb845466fb9a068aa4b986b

版权

　　用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事件：

$("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

6. 　　var blur = $("#blur").val(); // blur

7. 　　var br = $("#br").val(); // brightness

8. 　　var ct = $("#ct").val(); // contrast

9. 　　var huer = $("#huer").val(); //hue-rotate

10. 　　var opacity = $("#opacity").val(); //opacity

11. 　　var invert = $("#invert").val(); //invert

12. 　　var saturate = $("#saturate").val(); //saturate

13. 　　var sepia = $("#sepia").val(); //sepia

14. 　　$("#imageContainer img").css("filter", 'grayscale(' + gs+

15. 　　'%) blur(' + blur +

16. 　　'px) brightness(' + br +

17. 　　'%) contrast(' + ct +

18. 　　'%) hue-rotate(' + huer +

19. 　　'deg) opacity(' + opacity +

20. 　　'%) invert(' + invert +

21. 　　'%) saturate(' + saturate +

22. 　　'%) sepia(' + sepia + '%)');

23. 　　$("#imageContainer img").css("-webkit-filter", 'grayscale(' + gs+

24. 　　'%) blur(' + blur +

25. 　　'px) brightness(' + br +

26. 　　'%) contrast(' + ct +

27. 　　'%) hue-rotate(' + huer +

28. 　　'deg) opacity(' + opacity +

29. 　　'%) invert(' + invert +

30. 　　'%) saturate(' + saturate +

31. 　　'%) sepia(' + sepia + '%)');

32. 　　}

　　其实很简单，我们在每次用户滑动控制条的时候，我们就通过类似

var gs = $("#gs").val();的语句取得相对应地值，然后通过Jquery的css()方法直接为图片加上filter效果，而且相信你也看得出来，这个函数的后半段就是实现浏览器兼容的

1. 　$("#imageContainer img").css("-webkit-filter",...)

2. 　　复制代码

3. 　　这段代码其实就是在img元素实现了类似下面的效果;

4.

5. [img=28,30][/img]

　　最后，如果你不想将某些特效加到图片上面去，你可以点

reset然后将图片重置到原始状态：

1.

$('#imageEditor').on('reset', function () {

3. 　　setTimeout(function() {

4. 　　editImage();

5. 　　},0);

6. 　　});

　　这里需要说明一下的是，这里的

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

1. $('#imageEditor').on('reset', function () {

2. 　　editImage();

3. 　　});

　　这个时候，

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

　　浏览器打开

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

powerx_yc

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用CSS和JS打造一个简单的图片编辑器

　　用CSS和JS打造一个简单的图片编辑器，本文主要是利用CSS的filter和简单的Jquery代码来实现一个简单的图片编辑器，包括对图片的透明度，黑白，图片亮度等调节。CSS filter　　我们首先来探讨一下filter。　　首先来说明一下filter，在CSS里面要实现filter，其实很简单，使用类似下面的声明方式：　　1. .example {...
复制链接

扫一扫