沁心崖 沁心崖

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

/

效果图：


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

CSS filter

我们首先来探讨一下filter。

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

  1. .example {
  2.   filter: <filter-function> [<filter-function>];
  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. }
  5. .example-2 {
  6.   filter: hue-rotate(90deg);
  7. }

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

  1. .example {
  2.   filter: grayscale(0.5) blur(10px);
  3. }

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

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

创建基本的HTML文件

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

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Image Editor</title>
  7.         <link href = "css/main.css" type="text/css" rel="stylesheet">
  8.     </head>
  10.     <body>
  11.         <div class="wrapper">
  12.             <h1>Image Editor</h1>
  14.             <!--Form for collecting image URL -->
  15.             <form id="urlBox" class = "center">
  16.                 <input class="url-box" type="url" id="imgUrl" placeholder="Paste any image link and hit enter to start playing.">
  17.             </form>
  19.             <!--Controls for CSS filters via range input-->
  20.             <div class="sliders">
  21.                 <form id="imageEditor">
  22.                     <p>
  23.                         <label for="gs">Grayscale</label>
  24.                         <input id="gs" name="gs" type="range" min=0 max=100 value=0>
  25.                     </p>
  27.                     <p>
  28.                         <label for="blur">Blur</label>
  29.                         <input id="blur" name="blur" type="range" min=0 max=10 value=0>
  30.                     </p>
  32.                     <p>
  33.                         <label for="br">Brightness</label>
  34.                         <input id="br" name="br" type="range" min=0 max=200 value=100>
  35.                     </p>
  37.                     <p>
  38.                         <label for="ct">Contrast</label>
  39.                         <input id="ct" name="ct" type="range" min=0 max=200 value=100>
  40.                     </p>
  42.                     <p>
  43.                         <label for="huer">Hue Rotate</label>
  44.                         <input id="huer" name="huer" type="range" min=0 max=360 value=0>
  45.                     </p>
  47.                     <p>
  48.                         <label for="opacity">Opacity</label>
  49.                         <input id="opacity" name="opacity" type="range" min=0 max=100 value=100>
  50.                     </p>
  52.                     <p>
  53.                         <label for="invert">Invert</label>
  54.                         <input id="invert" name="invert" type="range" min=0 max=100 value=0>
  55.                     </p>
  57.                     <p>
  58.                         <label for="saturate">Saturate</label>
  59.                         <input id="saturate" name="saturate" type="range" min=0 max=500 value=100>
  60.                     </p>
  62.                     <p>
  63.                         <label for="sepia">Sepia</label>
  64.                         <input id="sepia" name="sepia" type="range" min=0 max=100 value=0>
  65.                     </p>
  67.                     <input type="reset" form="imageEditor" id="reset" value="Reset" />
  69.                 </form>
  70.             </div>  
  72.             <!--container where image will be loaded-->
  73.             <div id="imageContainer" class="center">
  74.                 <img src="images/aviary_heibai.jpg"/>
  75.             </div>
  76.         </div>
  78.         <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
  79.         <script type="text/javascript" src="js/main.js"></script>
  82.     </body>
  83. </html>

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

上面的每一个 <form id=”imageEditor”>下面的<p>元素下面的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. }
  9. //on pressing return, addImage() will be called
  10. $("#urlBox").submit(addImage);

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

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

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

也就是说，每次用户在移动控制条的时候，我们都执行editImage函数。
但是这样的体验可能还不是最好，因为在最后用户的鼠标离开控制条的时候，我们还可以监听change事件，把这一刻的变化也交给editImage函数处理，所以可以将上面的代码写成这样：

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

编写editImage函数

上面我们将input[type=range]的mousemove和change事件交给了editImage函数处理，所以，我们来编写一下editImage的函数代码：

  1. function editImage() {
  2.     var gs = $("#gs").val(); // grayscale
  3.     var blur = $("#blur").val(); // blur
  4.     var br = $("#br").val(); // brightness
  5.     var ct = $("#ct").val(); // contrast
  6.     var huer = $("#huer").val(); //hue-rotate
  7.     var opacity = $("#opacity").val(); //opacity
  8.     var invert = $("#invert").val(); //invert
  9.     var saturate = $("#saturate").val(); //saturate
  10.     var sepia = $("#sepia").val(); //sepia
  12.     $("#imageContainer img").css("filter", 'grayscale(' + gs+
  13.                                                      '%) blur(' + blur +
  14.                                                      'px) brightness(' + br +
  15.                                                      '%) contrast(' + ct +
  16.                                                      '%) hue-rotate(' + huer +
  17.                                                      'deg) opacity(' + opacity +
  18.                                                      '%) invert(' + invert +
  19.                                                      '%) saturate(' + saturate +
  20.                                                      '%) sepia(' + sepia + '%)');
  22.     $("#imageContainer img").css("-webkit-filter", 'grayscale(' + gs+
  23.                                                      '%) blur(' + blur +
  24.                                                      'px) brightness(' + br +
  25.                                                      '%) contrast(' + ct +
  26.                                                      '%) hue-rotate(' + huer +
  27.                                                      'deg) opacity(' + opacity +
  28.                                                      '%) invert(' + invert +
  29.                                                      '%) saturate(' + saturate +
  30.                                                      '%) sepia(' + sepia + '%)'); 
  32. }

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

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

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

<img src="images/aviary_heibai.jpg" style="-webkit-filter: grayscale(0%) blur(0px) brightness(100%) contrast(100%) hue-rotate(0deg) opacity(100%) invert(0%) saturate(100%) sepia(0%);">

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

$('#imageEditor').on('reset', function () {
    setTimeout(function() {
        editImage();
    },0);
});

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

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

        editImage();
    });

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

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

转载请注明作者和出处，并添加本页链接。
原文链接: //www.v2ci.com/8.html

下一篇：Node.js 16.2.0 正式发布

上一篇：Echarts折线图设置Y轴相关参数