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

NSFish 发布于2019-08-22 10:57 / 863人阅读

摘要：原文来自效果图本文主要是利用的和简单的代码来实现一个简单的图片编辑器，包括对图片的透明度，黑白，图片亮度等调节。简单地说完之后，我们来动手创建一个简单的图片编辑器。

原文来自：https://jellybool.com/post/build-a-simple-image-editor-with-css-js

demo: https://jellybool.com/demo/image-editor

效果图：

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

CSS filter

我们首先来探讨一下filter。

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

.example {
  filter:  [];
}

比如说，我们给图片添加一点灰度(grayscale)特效，就可以这样：

.example {
  filter: grayscale(90%);
}

当然，为了浏览器兼容，我们最好这样写：


.example {
  -webkit-filter: grayscale(90%);
  filter: grayscale(90%);
}

需要注意的是：filter的属性值的单位通常可能是从0到1之间，但是有些不是这样的，比如blur是使用像素"px"来作为单位的，而hue-rotate则使用角度deg来作为基本单位；

.example {
  filter: blur(10px);
}

.example-2 {
  filter: hue-rotate(90deg);
}

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

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

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

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

创建基本的HTML文件

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




    
        
        Image Editor

        
    

    
        
            Image Editor

            
            
                
            

            
            
                
                    
                        Grayscale
                        
                    

                    
                        Blur
                        
                    

                    
                        Brightness
                        
                    

                    
                        Contrast
                        
                    

                    
                        Hue Rotate
                        
                    

                    
                        Opacity
                        
                    

                    
                        Invert
                        
                    

                    
                        Saturate
                        
                    

                    
                        Sepia

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

上面的每一个

下面的

元素下面的input都是filter的一个属性设置，因为我们可以同时用多个filter来对图片产生特效，所以我每个filter的属性值都设置为可以调节的状态。

上面的index.html还要说明的是，在最上面我们提供一个输入框，用于给用户输入图片的URL，当用户点击回车的时候，我们就将这张图片显示到编辑区域。使用的是下面的简单js代码：

function addImage(e) {
    var imgUrl = $("#imgUrl").val();
    if (imgUrl.length) {
        $("#imageContainer img").attr("src", imgUrl);
    }
    e.preventDefault();
}

//on pressing return, addImage() will be called
$("#urlBox").submit(addImage);

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

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

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

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

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

编写editImage函数

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


function editImage() {
    var gs = $("#gs").val(); // grayscale
    var blur = $("#blur").val(); // blur
    var br = $("#br").val(); // brightness
    var ct = $("#ct").val(); // contrast
    var huer = $("#huer").val(); //hue-rotate
    var opacity = $("#opacity").val(); //opacity
    var invert = $("#invert").val(); //invert
    var saturate = $("#saturate").val(); //saturate
    var sepia = $("#sepia").val(); //sepia

    $("#imageContainer img").css("filter", "grayscale(" + gs+
                                                     "%) blur(" + blur +
                                                     "px) brightness(" + br +
                                                     "%) contrast(" + ct +
                                                     "%) hue-rotate(" + huer +
                                                     "deg) opacity(" + opacity +
                                                     "%) invert(" + invert +
                                                     "%) saturate(" + saturate +
                                                     "%) sepia(" + sepia + "%)");

    $("#imageContainer img").css("-webkit-filter", "grayscale(" + gs+
                                                     "%) blur(" + blur +
                                                     "px) brightness(" + br +
                                                     "%) contrast(" + ct +
                                                     "%) hue-rotate(" + huer +
                                                     "deg) opacity(" + opacity +
                                                     "%) invert(" + invert +
                                                     "%) saturate(" + saturate +
                                                     "%) sepia(" + sepia + "%)"); 

}

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

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

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

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

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

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

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

        editImage();
    });

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

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

Happy Hacking

GPU云服务器云服务器简单的上传图片js js编辑对图片的处理简单js图片轮转用js添加css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91522.html

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

摘要：原文来自效果图本文主要是利用的和简单的代码来实现一个简单的图片编辑器，包括对图片的透明度，黑白，图片亮度等调节。简单地说完之后，我们来动手创建一个简单的图片编辑器。原文来自：https://jellybool.com/post/build-a-simple-image-editor-with-css-js demo: https://jellybool.com/demo/i...

jerryloveemily 2019-08-28 18:12 评论0 收藏0
ELSE 技术周刊(2017.11.13期)

摘要：腾讯空间超分辨率技术为用户节省流量，处理效果和速度超谷歌技术在的标准下，处理速度在提升了，处理效果也有明显提升。此外，也是业界首次实现移动端使用深度神经网络进行超分辨率，并保证图片能够实时进行处理。值得一提的是的对应指标也在名单里。团队分享魔幻语言 JavaScript 系列之 call、bind 以及上下文从一行代码来看看 JavaScript 是一门多么魔幻的语言，顺便谈谈 ...

caohaoyu 2019-08-21 17:38 评论0 收藏0
CSS相关文章

摘要：如何用获取虚拟键盘高度前端早读课月号早读文章由汤谷投稿分享。大杀器和把动画转换成原生动画初来乍到，本文搬运自我月份在知乎发的文章。前端面试之 CSS3 新特性除了 HTML5 的新特性，CSS3 的新特性也是面试中经常被问到的。如何用 js 获取虚拟键盘高度？-前端早读课 9月7号早读文章由@汤谷投稿分享。正文从这开始～这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题...

FrozenMap 2019-08-29 14:21 评论0 收藏0
如何打造一个令人愉悦的前端开发环境（一）

摘要：我觉得这方面的原因是当时对和的依赖，导致大家对的兴趣不弄，错过了最佳时机，这个其实跟百度自己的的技术栈有很大关系。这个阮一峰对于前端构建的变化吐槽过，说新的构建工具就是的构建工具。文章来源最近几年，前端发展越来越迅速，各种萌新加入了前端这个大家庭，大有赶IOS、超Android的趋势呀！同时，萌新们提出了各种前端工作问题，除了最基础的html、css、js三板斧之外，最让人头疼的应...

KavenFan 2019-08-02 16:21 评论0 收藏0
如何打造一个令人愉悦的前端开发环境（一）

摘要：我觉得这方面的原因是当时对和的依赖，导致大家对的兴趣不弄，错过了最佳时机，这个其实跟百度自己的的技术栈有很大关系。这个阮一峰对于前端构建的变化吐槽过，说新的构建工具就是的构建工具。文章来源最近几年，前端发展越来越迅速，各种萌新加入了前端这个大家庭，大有赶IOS、超Android的趋势呀！同时，萌新们提出了各种前端工作问题，除了最基础的html、css、js三板斧之外，最让人头疼的应...

Yangyang 2019-08-22 11:01 评论0 收藏0