Make A Image Editor With HTML, CSS And JS. - DEV Community

Trang chủ » Html Photo Editor » Make A Image Editor With HTML, CSS And JS. - DEV Community

Có thể bạn quan tâm

Introducing FOTOQUICK

Ok, so I find myself needing quick and easy photo manipulation tools. I think many have too found them in my place. So recently, I was challenged to make a simple app within 2 hours. Well, I was searching for ideas for the first half an hour and then I realized about image manipulation. So, I created FOTOQUICK, a simple and easy-to-use photo editing app on the web, which is also built on nothing but HTML, CSS, and JAVASCRIPT !!

  • Source Code
  • Live Demo

Ok so as usual our file structure will be as follows:

filestructure

1st let's create our HTML file.

We will first of all add bootstrap and other scripts. Also, this is where we will devise our title and favicon

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>FotoQuick by Abhiraj</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link rel="shortcut icon" type="image/jpg" href="favicon.ico"/> </head> <body> <div class="sidebar"> <div class="image_filters"> <h2 type="button" data-toggle="collapse" data-target="#filters">Image Filters <span class="drop-down">&#9660;</span></h2> <div class="collapse" id="filters"> <button class='btn btn-primary' id="btn" style="font-size: 25px;" onclick="grayscale()">GrayScale</button> <button class='btn btn-primary' id="btn" style="font-size: 25px;" onclick="bright()">Brighen</button> <br> <br> <button class='btn btn-primary' id="btn" style="font-size: 25px;" onclick="dark()">Darken</button> <button class="btn btn-primary" id="btn" style="font-size: 25px;" onclick="blur_effect()">Blur Effect</button> <br> <br> <button class='btn btn-primary' id="btn" style="font-size: 25px;" onclick="emboss()">Emboss</button> <button class='btn btn-primary' id="btn" style="font-size: 25px;" onclick="sharp()">Sharpen</button> </div> <div class="breaks"> <br> <br> </div> </div> <div class="import_and_export"> <h2 type="button" data-toggle="collapse" data-target="#import_export">Import and Export <span class="drop-down">&#9660;</span></h2> <div class="import_and_export_buttons"> <div class="collapse" id="import_export"> <div class="btn btn-primary" style="font-size: 25px;" onclick="selectImage()"> <input type="file" id="foto-file" accept="image/png"/> Import Image </div> <button class="btn btn-primary" style="font-size: 25px;" onclick="download()">Export Image</button> </div> </div> </div> <div class="breaks"> <br> <br> </div> <div class="edit"> <h2 type="button" data-toggle="collapse" data-target="#edit">Editing <span class="drop-down">&#9660;</span></h2> <div class="collapse" id="edit"> <button class="btn btn-primary" style="font-size: 25px;" id="btn" onclick="crop()">Crop Image</button> <button class="btn btn-primary" style="font-size: 25px;" id="btn" onclick="flip_img()">Flip Image</button> <br><br> <button class="btn btn-primary" onclick="makeTransparent()" style="font-size: 25px;" id="btn"><div id="color-preview"></div>Transparent</button> <input type="color" id="colorize-color-picker" value="#00000" oninput="makeColorize(this)"> <button class="btn btn-primary" style="font-size: 25px;" id="btn" onclick="openColorPicker()">Colorize</button> </div> </div> </div> <div class="img-container"> <img id="foto-image" class="image"/> </div> <script src="https://rawcdn.githack.com/kousik19/foto.js/045defe1a5ce06220e084e4e6f6fbaccb7621841/foto.min.js"></script> <script src="script.js"></script> </body> </html> Enter fullscreen mode Exit fullscreen mode

Now let's put some spice in this HTML.

Up next, we will add some CSS.

.sidebar{ height: 100%; width: 400px; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(206, 250, 209); overflow-x: hidden; padding: 20px; } .drop-down{ font-size: 20px; float: right; position: relative; top: 10px; } h2{ user-select: none; border: 3px solid rgb(250, 1, 1); padding: 5px; } br{ user-select: none; } #foto-file{ display: none; } #btn{ width: 170px; } .image{ position: relative; left: 500px; user-select: none; } #colorize-color-picker{ display: none; } Enter fullscreen mode Exit fullscreen mode

Now that our site is actually, let us make it actually work.

gif

var foto; window.onload = function() { foto = new Foto(); } function selectImage() { document.getElementById('foto-file').click(); } function grayscale(){ foto.grayscale(); } function bright(){ foto.makeBright(); } function dark(){ foto.makeDark(); } function blur_effect() { foto.applyBlurFilter(); } function emboss() { foto.applyEmbossFilter(); } function sharp() { foto.applySharpFilter(); } function download(){ foto.export(); } function flip_img(){ foto.flipVertically(); } function crop(){ foto.cropSelected(); } function makeTransparent(){ foto.makeTransparent(); } function openColorPicker(){ document.getElementById("colorize-color-picker").click(); } function makeColorize(elem){ var color = elem.value; foto.applyColorFilter(color); Enter fullscreen mode Exit fullscreen mode

And VOILA! You have created a simple photo editing app.

if you liked this tutorial, then please do star the github repository or buy me a coffee maybe.

Buy Me A Coffee

Từ khóa » Html Photo Editor