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

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

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

好程序员web前端分享用CSS和JS打造一个简单的图片编辑器
本文主要是利用 CSS的 filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节. CSS filter 我们首先来探讨一下 filter. 首先来说 ...
[DIV/CSS] 用CSS和JS打造一个简单的图片编辑器
本文主要是利用CSS的 filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节. CSS filter 我们首先来探讨一下filter. 首先来说明一 ...
Web(前端开发）结合html、css、js写一个简单的相册
该相册制作分为登录.注册和主页面(由于后端没有实现,登录注册只有一些简单的判断),代码如下 (1)登录界面的HTML <!DOCTYPE html> <html lang=" ...
如何用 Node.js 实现一个简单的 Websocket 服务？
最近正在研究 Websocket 相关的知识,想着如何能自己实现 Websocket 协议.到网上搜罗了一番资料后用 Node.js 实现该协议,倒也没有想象中那么复杂,除去注释语句和 console ...
JS写一个简单的五星评价
JS写一个简单的五星评价在做前端网页页面的时候很多时候回有遇到星级评价的模块,用到的地方挺多所以自己就上传下方便大家和自己使用(不支持半星评价因为没有半星的图). 效果图如下: 下面是我们的代码: ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
使用 Vue.js 制作一个简单的调查问卷平台
使用 Vue.js 制作一个简单的调查问卷平台原文 https://github.com/pramper/Demos/tree/master/Vue-Demos/Questionnaire 主题 ...
Node.js搭建一个简单的服务器
文章目录 Node.js的安装了解Node.js模块系统服务器的搭建一.创建一个Web服务器注意程序代码运行二.静态资源托管静态资源注意程序代码运行三.简单接口的实现(简单服务 ...
原生JS实现一个简单的打字小游戏
原生JS实现一个简单的打字小游戏利用javascript制作一个简单的打字小游戏之前写了一个贪吃蛇小游戏好像反响不错今天我来写一个比贪吃蛇更low更简单的打字小游戏打字小游戏原理接下来咋们直 ...

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

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

最新文章

热门文章