[DIV/CSS] 用CSS和JS打造一个简单的图片编辑器
2016-03-14 17:04
597 查看
本文主要是利用CSS的 filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节。
CSS filter
我们首先来探讨一下filter。
首先来说明一下filter,在CSS里面要实现filter,其实很简单,使用类似下面的声明方式:
.example {
filter: <filter-function> [<filter-function>];
}
复制代码
比如说,我们给图片添加一点灰度(grayscale)特效,就可以这样:
.example {
filter: grayscale(90%);
}
复制代码
当然,为了浏览器兼容,我们最好这样写:
<br>.example {
-webkit-filter: grayscale(90%);
filter: grayscale(90%);
}
http://www.nvzi91.cn/fujianyan/29933.html
复制代码
需要注意的是:filter的属性值的单位通常可能是从0到1之间,但是有些不是这样的,比如blur是使用像素'px'来作为单位的,而hue-rotate则使用角度deg来作为基本单位;
.example {
filter: blur(10px);
}
.example-2 {
filter: hue-rotate(90deg);
}
http://www.nvzi91.cn/zigongnamoyan/29934.html
复制代码
但是如果每次只能使用一个filter就比较麻烦了,所以CSS提供了更加方便的书写形式,直接并排着写:
.example {
filter: grayscale(0.5) blur(10px);
}
复制代码
这样就可以实现对一个元素添加多个filter属性。
简单地说完filter之后,我们来动手创建一个简单的图片编辑器。
创建基本的HTML文件
在这里我们创建一个index.html,代码也比较简单:
<br><!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Image Editor</title>
<link href = "css/main.css" type="text/css" rel="stylesheet">
</head>
http://www.nvzi91.cn/chunvmoxiufu/29935.html
<body>
<div class="wrapper">
<h1>Image Editor</h1>
<!--Form for collecting image URL -->
<form id="urlBox" class = "center">
<input class="url-box" type="url" id="imgUrl" placeholder="Paste any image link and hit enter to start playing.">
</form>
<!--Controls for CSS filters via range input-->
<div class="sliders">
<form id="imageEditor">
<p>
<label for="gs">Grayscale</label>
<input id="gs" name="gs" type="range" min=0 max=100 value=0>
</p>
http://www.nvzi91.cn/penqiangyan/29936.html
<p>
<label for="blur">Blur</label>
<input id="blur" name="blur" type="range" min=0 max=10 value=0>
</p>
<p>
<label for="br">Brightness</label>
<input id="br" name="br" type="range" min=0 max=200 value=100>
</p>
<p>
<label for="ct">Contrast</label>
<input id="ct" name="ct" type="range" min=0 max=200 value=100>
</p>
<p>
<label for="huer">Hue Rotate</label>
<input id="huer" name="huer" type="range" min=0 max=360 value=0>
</p>
http://www.nvzi91.cn/yindaoyan/29937.html
<p>
<label for="opacity">Opacity</label>
<input id="opacity" name="opacity" type="range" min=0 max=100 value=100>
</p>
<p>
<label for="invert">Invert</label>
<input id="invert" name="invert" type="range" min=0 max=100 value=0>
</p>
<p>
<label for="saturate">Saturate</label>
<input id="saturate" name="saturate" type="range" min=0 max=500 value=100>
</p>
<p>
<label for="sepia">Sepia</label>
<input id="sepia" name="sepia" type="range" min=0 max=100 value=0>
</p>
<input type="reset" form="imageEditor" id="reset" value="Reset" />
</form>
</div>
http://www.kmrlyy.com/lcnz/33448.html
<!--container where image will be loaded-->
<div id="imageContainer" class="center">
<img src="images/aviary_heibai.jpg"/>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
http://www.kmrlyy.com/penqiangyan/33450.html
复制代码
这个文件里,我们引入了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);
http://www.kmrlyy.com/zgjl/33451.html
复制代码
上面的js代码也是写到main.js当中。有了可以用户自己添加图片之后,我们就可以实现对图片的编辑了:
每次用户在滑动进度条的时候,我们就可以将效果展示给用户看,于是我们来监听用户的mousemove事件:
$("input[type=range]").mousemove(editImage);
复制代码
也就是说,每次用户在移动控制条的时候,我们都执行editImage函数。
但是这样的体验可能还不是最好,因为在最后用户的鼠标离开控制条的时候,我们还可以监听change事件,把这一刻的变化也交给editImage函数处理,所以可以将上面的代码写成这样:
$("input[type=range]").mousemove(editImage).change(editImage);
http://www.kmrlyy.com/gongjingai/33452.html
复制代码
编写editImage函数
上面我们将input[type=range]的mousemove和change事件交给了editImage函数处理,所以,我们来编写一下editImage的函数代码:
<br>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
http://www.kmrlyy.com/gongjingfeida/33453.html
$("#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 + '%)');
http://m.nvzi91.cn/gongjingmilan/29348.html
}
复制代码
其实很简单,我们在每次用户滑动控制条的时候,我们就通过类似var gs = $("#gs").val();的语句取得相对应地值,然后通过Jquery的css()方法直接为图片加上filter效果,而且相信你也看得出来,这个函数的后半段就是实现浏览器兼容的
$("#imageContainer img").css("-webkit-filter",...)
www.nvzi91.cn
www.kmrlyy.com
复制代码
这段代码其实就是在img元素实现了类似下面的效果;
<br><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%);">
m.nvzi91.cn
http://m.nvzi91.cn/gongjingyan/29349.html
复制代码
最后,如果你不想将某些特效加到图片上面去,你可以点reset然后将图片重置到原始状态:
$('#imageEditor').on('reset', function () {
setTimeout(function() {
editImage();
},0);
});
复制代码
这里需要说明一下的是,这里的setTimeout函数就是为了将reset的效果最快地展现出来,如果写成下面的形式:
$('#imageEditor').on('reset', function () {
editImage();
});
http://m.nvzi91.cn/gongjingxirou/29350.html
复制代码
这个时候,reset效果执行起来其实是有一点延迟的,你明显可以看到等待的时候,它并不是很快。
浏览器打开index.html,就可以看到相应的调节效果了。你可以拖动一些设置项的控制条来查看效果。
Happy Hacking
CSS filter
我们首先来探讨一下filter。
首先来说明一下filter,在CSS里面要实现filter,其实很简单,使用类似下面的声明方式:
.example {
filter: <filter-function> [<filter-function>];
}
复制代码
比如说,我们给图片添加一点灰度(grayscale)特效,就可以这样:
.example {
filter: grayscale(90%);
}
复制代码
当然,为了浏览器兼容,我们最好这样写:
<br>.example {
-webkit-filter: grayscale(90%);
filter: grayscale(90%);
}
http://www.nvzi91.cn/fujianyan/29933.html
复制代码
需要注意的是:filter的属性值的单位通常可能是从0到1之间,但是有些不是这样的,比如blur是使用像素'px'来作为单位的,而hue-rotate则使用角度deg来作为基本单位;
.example {
filter: blur(10px);
}
.example-2 {
filter: hue-rotate(90deg);
}
http://www.nvzi91.cn/zigongnamoyan/29934.html
复制代码
但是如果每次只能使用一个filter就比较麻烦了,所以CSS提供了更加方便的书写形式,直接并排着写:
.example {
filter: grayscale(0.5) blur(10px);
}
复制代码
这样就可以实现对一个元素添加多个filter属性。
简单地说完filter之后,我们来动手创建一个简单的图片编辑器。
创建基本的HTML文件
在这里我们创建一个index.html,代码也比较简单:
<br><!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Image Editor</title>
<link href = "css/main.css" type="text/css" rel="stylesheet">
</head>
http://www.nvzi91.cn/chunvmoxiufu/29935.html
<body>
<div class="wrapper">
<h1>Image Editor</h1>
<!--Form for collecting image URL -->
<form id="urlBox" class = "center">
<input class="url-box" type="url" id="imgUrl" placeholder="Paste any image link and hit enter to start playing.">
</form>
<!--Controls for CSS filters via range input-->
<div class="sliders">
<form id="imageEditor">
<p>
<label for="gs">Grayscale</label>
<input id="gs" name="gs" type="range" min=0 max=100 value=0>
</p>
http://www.nvzi91.cn/penqiangyan/29936.html
<p>
<label for="blur">Blur</label>
<input id="blur" name="blur" type="range" min=0 max=10 value=0>
</p>
<p>
<label for="br">Brightness</label>
<input id="br" name="br" type="range" min=0 max=200 value=100>
</p>
<p>
<label for="ct">Contrast</label>
<input id="ct" name="ct" type="range" min=0 max=200 value=100>
</p>
<p>
<label for="huer">Hue Rotate</label>
<input id="huer" name="huer" type="range" min=0 max=360 value=0>
</p>
http://www.nvzi91.cn/yindaoyan/29937.html
<p>
<label for="opacity">Opacity</label>
<input id="opacity" name="opacity" type="range" min=0 max=100 value=100>
</p>
<p>
<label for="invert">Invert</label>
<input id="invert" name="invert" type="range" min=0 max=100 value=0>
</p>
<p>
<label for="saturate">Saturate</label>
<input id="saturate" name="saturate" type="range" min=0 max=500 value=100>
</p>
<p>
<label for="sepia">Sepia</label>
<input id="sepia" name="sepia" type="range" min=0 max=100 value=0>
</p>
<input type="reset" form="imageEditor" id="reset" value="Reset" />
</form>
</div>
http://www.kmrlyy.com/lcnz/33448.html
<!--container where image will be loaded-->
<div id="imageContainer" class="center">
<img src="images/aviary_heibai.jpg"/>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
http://www.kmrlyy.com/penqiangyan/33450.html
复制代码
这个文件里,我们引入了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);
http://www.kmrlyy.com/zgjl/33451.html
复制代码
上面的js代码也是写到main.js当中。有了可以用户自己添加图片之后,我们就可以实现对图片的编辑了:
每次用户在滑动进度条的时候,我们就可以将效果展示给用户看,于是我们来监听用户的mousemove事件:
$("input[type=range]").mousemove(editImage);
复制代码
也就是说,每次用户在移动控制条的时候,我们都执行editImage函数。
但是这样的体验可能还不是最好,因为在最后用户的鼠标离开控制条的时候,我们还可以监听change事件,把这一刻的变化也交给editImage函数处理,所以可以将上面的代码写成这样:
$("input[type=range]").mousemove(editImage).change(editImage);
http://www.kmrlyy.com/gongjingai/33452.html
复制代码
编写editImage函数
上面我们将input[type=range]的mousemove和change事件交给了editImage函数处理,所以,我们来编写一下editImage的函数代码:
<br>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
http://www.kmrlyy.com/gongjingfeida/33453.html
$("#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 + '%)');
http://m.nvzi91.cn/gongjingmilan/29348.html
}
复制代码
其实很简单,我们在每次用户滑动控制条的时候,我们就通过类似var gs = $("#gs").val();的语句取得相对应地值,然后通过Jquery的css()方法直接为图片加上filter效果,而且相信你也看得出来,这个函数的后半段就是实现浏览器兼容的
$("#imageContainer img").css("-webkit-filter",...)
www.nvzi91.cn
www.kmrlyy.com
复制代码
这段代码其实就是在img元素实现了类似下面的效果;
<br><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%);">
m.nvzi91.cn
http://m.nvzi91.cn/gongjingyan/29349.html
复制代码
最后,如果你不想将某些特效加到图片上面去,你可以点reset然后将图片重置到原始状态:
$('#imageEditor').on('reset', function () {
setTimeout(function() {
editImage();
},0);
});
复制代码
这里需要说明一下的是,这里的setTimeout函数就是为了将reset的效果最快地展现出来,如果写成下面的形式:
$('#imageEditor').on('reset', function () {
editImage();
});
http://m.nvzi91.cn/gongjingxirou/29350.html
复制代码
这个时候,reset效果执行起来其实是有一点延迟的,你明显可以看到等待的时候,它并不是很快。
浏览器打开index.html,就可以看到相应的调节效果了。你可以拖动一些设置项的控制条来查看效果。
Happy Hacking
相关文章推荐
- 谈谈css王朝的px,em,rem之间的那些事儿
- iOS - 同一个Label的不同样式显示
- [DIV/CSS] 【译】下一代选择器:CSS4
- 自定义 <input type="file" /> 样式
- CSS3:布局
- 2016.3.14__CSS 浮动__第五天
- 手链样式( 使用全排列函数next_permutation)
- Sass mixin 使用css border属性画三角形
- dispaly:table布局
- 2016.3.14__CSS 盒模型_第四天
- css3中-moz、-ms、-webkit分别代表的意思
- css height:100%失效
- css: position 与 z-index 问题(2)
- css:position 与 z-index 问题(1)
- css3(border-radius) 边框圆角详解
- css文本换行
- css学习任务二:切图写代码
- 【2016年Esri开发者大会亮点解析】矢量切片大显威力,GitHub上提供样式编辑器
- CSS入门笔记 - 初识CSS
- CSS3属性之text-overflow:ellipsis详解