Morioh
Login
Sofiaml Boo

Sofiaml Boo

5 years ago

Build a Simple Image Editor Using CSS Filters

The CSS filter property used for visual effect to a web element (like Image ). We can place different types of filter in an image like blur, brightness, contrast, hue, etc. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. So, This post is for showing how the filter works.

Today you will learn to create a program for test filters. In other words, there is an image and some filter controls to see the effects. This program is useful for beginners who are new in learning JavaScript. This is an example of how we can fetch class, ID and modify their values dynamically. It is also easy to understand, the codes are clean and simple.

So, Today I am sharing CSS Filter Image Editor Using JavaScript. Basically, this program is to put effects on images using CSS image filters. I have used JavaScript to create the program, we also can use jquery for fewer codes program. But using this your JS skills will improve and you will be able to create another function using pure JS.

If you are thinking now how this image editor actually is, then see the preview given below.

Preview Of JS Image Editor Program

See this video preview to getting an idea of how this program looks like.

  • Now you can see this visually, you also can see it live by pressing the live view button given above. If you like this, then get the source code of its.

CSS Filter Image Editor Using JavaScript Source Code

Before sharing source code, let’s talk about it. First I have taken an image to see effects, After that, I have created some range sliders for filters. I have created sperate divs for each range slider, for creating range used HTML <input type="range"> property. All sliders had different class and id name.

In all slider, I have placed a minimum and maximum values and by default placed 0 value in maximum ranges. In the CSS file, I have placed all the elements like images and slider in the right places. Also styled the sliders using ::-webkit-slider-* (info) CSS properties & many more things did using CSS.

Now in JavaScript first, I fetched all the divs and ids. Now JS detects all range’s movement using .addEventListener() function. I can’t explain all things in writing, you will understand easily after getting the codes if you have knowledge of JS.

For creating this program you have to create 3 files. First for HTML second for CSS, and third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS Filter Effects | Webdevtrick.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
	<div class="image">
	<img id="img" src="https://webdevtrick.com/wp-content/uploads/login-page-image.jpg" alt="">
	</div>
 
	<div class="sliders">
		<div class="singleSlider">
		<div class="val" id="bright">100%</div>
		<input class="slider" id="slider1" type="range" min="0" max="500" value="100">
		<label for="slider1">brightness</label>
		</div>
		<div class="singleSlider">
		<div class="val" id="contrast">100%</div>
		<input class="slider" id="slider2" type="range" min="0" max="500" value="100">
		<label for="slider2">contrast</label>
		</div>
		<div class="singleSlider">
		<div class="val" id="saturate">100%</div>
		<input class="slider" id="slider3" type="range" min="0" max="500" value="100">
		<label for="slider3">saturate</label>
		</div>
		<div class="singleSlider">
		<div class="val" id="gray">0%</div>
		<input class="slider" id="slider4" type="range" min="0" max="100" value="0">
		<label for="slider4">grayscale</label>
		</div>
		<div class="singleSlider">
		<div class="val" id="invert">0%</div>
		<input class="slider" id="slider5" type="range" min="0" max="100" value="0">
		<label for="slider5">invert</label>
		</div>
		<div class="singleSlider">
		<div class="val" id="hue">0°</div>
		<input class="slider" id="slider6" type="range" min="0" max="360" value="0">
		<label for="slider6">hue rotate</label>
		</div>
		<div class="singleSlider">
		<div class="val" id="blur">0px</div>
		<input class="slider" id="slider7" type="range" min="0" max="20" value="0">
		<label for="slider7">blur</label>
		</div>
		<div class="singleSlider">
		<div class="val" id="opacity">100%</div>
		<input class="slider" id="slider8" type="range" min="0" max="100" value="0">
		<label for="slider8">opacity</label>
		</div>
		<div class="singleSlider">
		<div class="val" id="sepia">0%</div>
		<input class="slider" id="slider9" type="range" min="0" max="100" value="0">
		<label for="slider9">sepia</label>
		</div>
	</div>
</div>
<button id="resetAll">reset</button>
  <script  src="function.js"></script>
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
body {
	background: #fff;
	overflow: hidden;
	color: #313131;
 
}
.container{
	position: absolute;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}
#resetAll{
	position: absolute;
	top: 60vh;
	left: 50%;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: crimson;
	border: 1px solid #212121;
	text-transform: uppercase;
	transform: translate(-50%, 0);
	font-family: monospace;
	font-size: 1.5rem;
	cursor: pointer;
	color: #fff;
}
#resetAll:focus,
#resetAll:hover{
	background-color: crimson;
}
.image {
	position: absolute;
	top: 5vh;
	left: 15vw;
	height: 50vh;
	width: 70vw;
	overflow: hidden;
}
img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	height: auto;
}
.sliders {
	position: absolute;
	float: none;
	left: 5vw;
	width: 90vw;
}
.singleSlider {
	width: 8vw;
	padding: 0;
}
.slider {
	position: relative;
	width: 20vh;
	top: 5vh;
	transform-origin: 0 0;
}
label {
	position: relative;
	font-family: monospace;
	text-transform: uppercase;
 
}
.val {
	position: relative;
	display: block;
	font-family: monospace;
	height: 16px;
	width: 100%;
	text-align: right;
	visibility: hidden;
}
input[type="range"] {
	-webkit-appearance: none;
	background: transparent;
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
}
input[type="range"]:focus {
	outline: none;
}
input[type="range"]::-ms-track {
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
	height: 2px;
	cursor: pointer;
	background: crimson;
	margin-top: 10px;
}
input[type="range"]::-webkit-slider-thumb {
	height: 20px;
	width: 20px;
	border-radius: 10px;
	background: #212121;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -9px;
}
 
input[type="range"]::-moz-range-track {
	width: 100%;
	height: 2px;
	cursor: pointer;
	background: #fff;
}
input[type="range"]::-moz-range-thumb {
	height: 20px;
	width: 20px;
	border-radius: 20px;
	background: #212121;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -9px;
}
input[type="range"]::-ms-track {
	width: 100%;
	height: 2px;
	cursor: pointer;
	background: #fff;
}
input[type="range"]::-ms-thumb {
	height: 20px;
	width: 20px;
	border-radius: 20px;
	background: #212121;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: 0px;
}
button,
p{
	display: inline-block;
	border: none;
	margin: 0;
	text-decoration: none;
	padding: 0;
	background: none;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	overflow: hidden;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
button:focus {
	outline: none;
	color: black;
}
textarea:focus {
	outline: none;
}
select:focus {
	color: #000;
}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

//Code By Webdevtrick ( https://webdevtrick.com )
let brightness = 100;
let contrast = 100;
let saturate = 100;
let grayscale = 0;
let invert = 0;
let huerotate = 0;
let blur = 0;
let opacity = 100;
let sepia = 0;
let dropshadow = 0;
 
const imgture = document.getElementById("img");
const resetAll = document.getElementById("resetAll");
 
const slider1 = document.getElementById("slider1");
const value1 = document.getElementById("bright");
const slider2 = document.getElementById("slider2");
const value2 = document.getElementById("contrast");
const slider3 = document.getElementById("slider3");
const value3 = document.getElementById("saturate");
const slider4 = document.getElementById("slider4");
const value4 = document.getElementById("gray");
const slider5 = document.getElementById("slider5");
const value5 = document.getElementById("invert");
const slider6 = document.getElementById("slider6");
const value6 = document.getElementById("hue");
const slider7 = document.getElementById("slider7");
const value7 = document.getElementById("blur");
const slider8 = document.getElementById("slider8");
const value8 = document.getElementById("opacity");
const slider9 = document.getElementById("slider9");
const value9 = document.getElementById("sepia");
 
//Update filters
function updateFilters() {
	imgture.style.filter =
		"brightness(" +
		brightness +
		"%) contrast(" +
		contrast +
		"%) saturate(" +
		saturate +
		"%) grayscale(" +
		grayscale +
		"%) invert(" +
		invert +
		"%) hue-rotate(" +
		huerotate +
		"deg) blur(" +
		blur +
		"px) opacity(" +
		opacity +
		"%) sepia(" +
		sepia +
		"%)";
}
//Reset All
resetAll.addEventListener("click", function() {
	console.log("resset");
	brightness = 100;
	slider1.value = 100;
	value1.innerHTML = slider1.value + "%";
	contrast = 100;
	slider2.value = 100;
	value2.innerHTML = slider2.value + "%";
	saturate = 100;
	slider3.value = 100;
	value3.innerHTML = slider3.value + "%";
	grayscale = 0;
	slider4.value = 0;
	value4.innerHTML = slider4.value + "%";
	invert = 0;
	slider5.value = 0;
	value5.innerHTML = slider5.value + "%";
	huerotate = 0;
	slider6.value = 0;
	value6.innerHTML = slider6.value + "px";
	blur = 0;
	slider7.value = 0;
	value7.innerHTML = slider7.value + "°";
	opacity = 100;
	slider8.value = 0;
	value8.innerHTML = 100 - slider8.value + "%";
	sepia = 0;
	slider9.value = 0;
	value9.innerHTML = slider9.value + "%";
	updateFilters();
});
 
//Brightness slider
slider1.addEventListener("input", function() {
	console.log(slider1.value);
	value1.innerHTML = slider1.value + "%";
	brightness = slider1.value;
	updateFilters();
});
 
slider1.addEventListener("focus", function() {
	console.log("focus gotten");
	value1.style.visibility = "visible";
});
 
slider1.addEventListener("blur", function() {
	console.log("focus lost");
	value1.style.visibility = "hidden";
});
 
//Contrast slider
slider2.addEventListener("input", function() {
	value2.innerHTML = slider2.value + "%";
	contrast = slider2.value;
	updateFilters();
});
 
slider2.addEventListener("focus", function() {
	value2.style.visibility = "visible";
});
 
slider2.addEventListener("blur", function() {
	value2.style.visibility = "hidden";
});
 
//Saturation slider
slider3.addEventListener("input", function() {
	value3.innerHTML = slider3.value + "%";
	saturate = slider3.value;
	updateFilters();
});
 
slider3.addEventListener("focus", function() {
	value3.style.visibility = "visible";
});
 
slider3.addEventListener("blur", function() {
	value3.style.visibility = "hidden";
});
 
 
//Grayscale slider
slider4.addEventListener("input", function() {
	value4.innerHTML = slider4.value + "%";
	grayscale = slider4.value;
	updateFilters();
});
 
slider4.addEventListener("focus", function() {
	value4.style.visibility = "visible";
});
 
slider4.addEventListener("blur", function() {
	value4.style.visibility = "hidden";
});
 
//Invert slider
slider5.addEventListener("input", function() {
	value5.innerHTML = slider5.value + "%";
	invert = slider5.value;
	updateFilters();
});
 
slider5.addEventListener("focus", function() {
	value5.style.visibility = "visible";
});
 
slider5.addEventListener("blur", function() {
	value5.style.visibility = "hidden";
});
 
//Hue-rotate slider
slider6.addEventListener("input", function() {
	value6.innerHTML = slider6.value + "°";
	huerotate = slider6.value;
	updateFilters();
});
 
slider6.addEventListener("focus", function() {
	value6.style.visibility = "visible";
});
 
slider6.addEventListener("blur", function() {
	value6.style.visibility = "hidden";
});
 
//Blur slider
slider7.addEventListener("input", function() {
	value7.innerHTML = slider7.value + "px";
	blur = slider7.value;
	updateFilters();
});
 
slider7.addEventListener("focus", function() {
	value7.style.visibility = "visible";
});
 
slider7.addEventListener("blur", function() {
	value7.style.visibility = "hidden";
});
 
//Opacity slider
slider8.addEventListener("input", function() {
	value8.innerHTML = 100 - slider8.value + "%";
	opacity = 100 - slider8.value;
	updateFilters();
});
 
slider8.addEventListener("focus", function() {
	value8.style.visibility = "visible";
});
 
slider8.addEventListener("blur", function() {
	value8.style.visibility = "hidden";
});
 
//Sepia slider
slider9.addEventListener("input", function() {
	value9.innerHTML = slider9.value + "%";
	sepia = slider9.value;
	updateFilters();
});
 
slider9.addEventListener("focus", function() {
	value9.style.visibility = "visible";
});
 
slider9.addEventListener("blur", function() {
	value9.style.visibility = "hidden";
});

That’s It. Now have successfully created CSS Filter Image Editor Using JavaScript, CSS Image Filters Based Editor. If you have any doubt or question comment down below.

Thanks for reading. If you liked this post, share it with all of your programming buddies!

#css #html #javascript #web-development

Build a Simple Image Editor Using CSS Filters
16.20 GEEK