ITPub博客

首页 > 应用开发 > Html/css > 好程序员web前端分享用CSS和JS打造一个简单的图片编辑器

好程序员web前端分享用CSS和JS打造一个简单的图片编辑器

原创 Html/css 作者:好程序员IT 时间:2019-05-20 16:15:21 0 删除 编辑

   本文主要是利用 CSS的 filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节。


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


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69913892/viewspace-2641841/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-03-20

  • 博文量
    185
  • 访问量
    143109