位置：首页-资讯-后端开发

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

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

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

　　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("class="lazy" data-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

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.

2. 　　$('#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，就可以看到相应的调节效果了。你可以拖动一些设置项的控制条来查看效果。

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

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉

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

下载Word文档到电脑，方便收藏和打印～

下载Word文档

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

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

相关文章

猜你喜欢

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

如何使用MySQL和JavaScript实现一个简单的在线编辑器功能

如何使用MySQL和JavaScript实现一个简单的在线编辑器功能

怎么使用Java IO流和网络制作一个简单的图片爬虫

怎么使用Python编写一个简单的垃圾邮件分类器

热门标签

编程热搜

Python 学习之路 - Python

chatgpt的中文全称是什么

C/C++中extern函数使用详解

C/C++可变参数的使用

css样式文件该放在哪里

php中数组下标必须是连续的吗

Python 3 教程

Python pip包管理

ubuntu如何重新编译内核

改善Java代码之慎用java动态编译

编程资源站

2021年下半年软考高级信息系统项目管理师高频考点精选资料

2021下半年软考高级信息系统技术知识点记忆口诀精选资料

2021下半年软考《信息系统项目管理师》考试真题及答案精选资料

2021下半年软考高级考试备考攻略精选资料

2021年软考高级《信息系统项目管理师》巩固练习题汇总精选资料

2021下半年软考高级信息系统项目管理师30个易考知识点汇总精选资料

2021下半年软考高级知识点这样记，还担心记不住吗精选资料

2021年下半年软考高级考试重点汇总精选资料

2021下半年软考高级信息系统项目管理师计算公式汇总精选资料

2021年下半年软考高级《信息系统项目管理师》模拟试题精选资料

信息系统项目管理师选择题每日一练（2024）历年试题

2023年下半年信息系统项目管理师综合知识真题演练历年试题

目录

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

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

相关文章

猜你喜欢

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

如何使用MySQL和JavaScript实现一个简单的在线编辑器功能

如何使用MySQL和JavaScript实现一个简单的在线编辑器功能

怎么使用Java IO流和网络制作一个简单的图片爬虫

怎么使用Python编写一个简单的垃圾邮件分类器

热门标签

编程热搜

编程资源站

目录

感谢您的提交，我们服务专员将在30分钟内给您回复