How we can test all CSS filters in an image using a JavaScript program? Solution: CSS Filter Image Editor Using JavaScript, CSS Image 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.
You May Also Like:
- HTML Video Player With JavaScript
- Responsive Testimonial Slider
- CSS Blend Modes
- Floating Social Share Buttons
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
/** 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 |
//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 Visiting, Keep Visiting.
Hey there how can we download this image Css applied image.
How do we download the edited picture