By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Notification Show More
Latest News
Responding to and Tracking Key Presses
How to Work With Responding to and Tracking Key Presses
JavaScript
Passing a JavaScript Value Between HTML Pages
Passing a JavaScript Value Between HTML Pages
JavaScript
Compare Objects in an Array
JavaScript Problem: Compare Objects in an Array
JavaScript
Switching Name Order Using Capturing Groups in Regular Expressions
Switching Name Order Using Capturing Groups in Regular Expressions
JavaScript
Shuffling an Array
JavaScript Problem: How to Perform Shuffling an Array
JavaScript
Aa
Aa
rocoderesrocoderes
Search
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Follow US
High Quality Design Resources for Free.
rocoderes > JavaScript > How to Make JavaScript Image Editor
JavaScript

How to Make JavaScript Image Editor

Admin
Last updated: 2022/11/24 at 4:54 AM
Admin
Share
5 Min Read
Image editor in javascript

πŸ‘‹ Hello guys today we will learn how to make a JavaScript image editor very easy way. To make a beautiful image editor using javascript with HTML canvas. So let’s start πŸ˜€. In this Project our main Focus is javascript.

Contents
πŸ‘‰ First Create a πŸ“‚index.html FileπŸ’‘ Now It’s time For Javascript Code 😎.πŸ‘‰ Now Create a πŸ“‚index.js FileπŸ˜ƒNow we defined some methods in javascript

πŸ‘‰ You can see the Demo Here πŸ‘javascript Image Editor: Create an image editor with HTML canvas and javascript

πŸ‘‰ First Create a πŸ“‚index.html File

➜ Create a simple file input. Our first aim is we select one image file using the file input and display it in the image element.

<div class="file-upload-section" onclick="selectImage()">
    <input id='foto-file' type="file">
    Select Image
 </div>

  <div class="img-container">
     <img id='foto-image' class="image">
 </div>

➜ First, add a section to put few buttons just below the select image area. I am adding three buttons here for the crop, flip and rotate functionalities. I am adding onclick function for each of the buttons.

  <div class="upper-buttons-section">
        <table class="buttons-table">
            <tr>
                <td><button class="operation-btn" onclick="crop()">Crop</button></td>
                <td><button class="operation-btn" onclick="flipVertically()">Flip</button></td>
                <td>
                <button class="operation-btn" onclick="displayRange()">
                    Rotate
                    <input type="range" id='rotate-range' value='0' min='0' max='360' onchange="rotate(this)">
                </button>
            </td>

            </tr>
        </table>
    </div>

➜ Now make few buttons that will be used to add effects to the image. And also need to add another button to download the edited image. Add three more buttons. three filtering buttons I am adding here along with onclick function name.

<div class="button-sections">
     <table class="buttons-table">
         <tr>
             <td><button class="operation-btn" onclick="makeGrayScale()">GrayScale</button></td>
             <td><button class="operation-btn" onclick="makeBright()">Brighter</button></td>
             <td><button class="operation-btn" onclick="makeDark()">Darker</button></td>
         </tr>
         <tr>
            <td><button class="operation-btn" onclick="makeBlur()">Blur</button></td>
            <td><button class="operation-btn" onclick="makeEmboss()">Emboss</button></td>
            <td><button class="operation-btn" onclick="makeSharp()">Sharp</button></td>
        </tr>
        <tr>
            <td>
                <input type="color" id='color-picker' value='#000000' oninput="makeColorize(this)">
                <button class="operation-btn" onclick="openColorPicker()">Colorize</button>
            </td>
            <td>
                <input type="color" id='colorize-color-picker' value='#000000' oninput="applyColorFilter(this)">
                <button class="operation-btn" onclick="openColorFilterPicker()">Color Filter</button>
            </td>
            <td><button class="operation-btn" onclick="makeTransparent()">
                <div id="color-preview"></div>
                Transparent</button></td>
        </tr>
        <tr>
            <td colspan="3"><button class="operation-btn download-btn" onclick="download()">Download</button></td>
        </tr>
     </table>
 </div>
πŸ’‘ Now It’s time For Javascript Code 😎.

πŸ‘‰ Now Create a πŸ“‚index.js File

➜ we write a few javascript coding for the display of the image. Now I use one library For our image editing purpose. This library is open source and is hosted in GitHub. The library is extremely easy to use.

➜ This cdn Link For this library πŸ‘‡

<script src="https://rawcdn.githack.com/kousik19/foto.js/045defe1a5ce06220e084e4e6f6fbaccb7621841/foto.min.js"></script>

Let’s start πŸ˜ƒ javascript coding section
➜ First, define a global variable foto. Then inside windows.onload function creates an object of foto class. Here foto class is defined inside the library.

 var foto;
 window.onload=function(){
        foto=new Foto()
 }

➜ In the HTML file, you see that we have added one on-click event on the file upload section.

javascript Image Editor:Create a image editor with HTML canvas and javascript

➜ Let’s define that select image method. All we want is clicking on the file upload section will perform click event on input type equal to file.

➜ Here just you have to remember that the input type file should have Id foto-file and the image element Id must be foto-image.

javascript Image Editor:Create a image editor with HTML canvas and javascript
πŸ˜ƒNow we defined some methods in javascript

1.makeGrayScale method

➜ inside makeGrayScale method you just have to write one line code.

 function makeGrayScale(){
            foto.grayscale()
   }

2. makeBright method

 function makeBright(){
            foto.makeBright()
   }

3.makeDark method

 function makeDark(){
            foto.makeDark()
    }

4.makeBlur method

 function makeBlur(){
        foto.applyBlurFilter()
    }

5.makeEmboss method

function makeEmboss(){
        foto.applyEmbossFilter()
 }

6.makeSharp method

   function makeSharp(){
    foto.applySharpFilter()
}

➜ Here you can just notice how easily πŸ˜ƒ image effects can be added.
➜ To download the image you just have to write foto.export()

function download(){
        foto.export()
    }

➜ In the HTML section, you can see that we have a onclick function. For the but named open color picker, and above that input, type equals to color. We have another function makeColorize. Which will be invoked. When the color picker value will be changed. Let’s define those functions in javascript.

javascript Image Editor:Create a image editor with HTML canvas and javascript
 function openColorPicker(){
            document.getElementById('color-picker').click();
        }
        function makeColorize(elem){
            var color=elem.value
            console.log("color",color)
            foto.colorize(color)
        }

➜ Let’s proceed with color filter functionality. in HTMLSection you can see this is quite similar to the makeColorize .

javascript Image Editor:Create a image editor with HTML canvas and javascript
 function openColorFilterPicker(){
            document.getElementById('colorize-color-picker').click();
        }
  function applyColorFilter(elem){
            var color=elem.value
            foto.applyColorFilter(color)
        }
javascript Image Editor:Create a image editor with HTML canvas and javascript

➜ Let’s implement Transparent functionality.

  function makeTransparent(){
            foto.makeTransparent()
        }

➜ Now proceed with crop and flip.

  function crop(){
            foto.cropSelected()
        }
        function flipVertically(){
            foto.flipVertically() 
        }

➜ implement Rotate functionality

  function rotate(elem){
    foto.rotate(elem.value)
}

πŸ‘‰ Source Code: javascript Image Editor: Create an image editor with HTML canvas and javascript

πŸ‘‰ If you want to clear the basic concepts of JavaScript you must read this:
➜ 15 JavaScript Basic Concepts You Should Know

πŸ‘‰ watch the Full Video πŸ‘ of JavaScript Image Editor: Create an image editor with HTML canvas and javascript πŸ‘‡

Related

Subscribe to Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

TAGGED: javascript image editor
Share this Article
Facebook Twitter Email Print
What do you think?
Love0
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
Posted by Admin
Follow:
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article Dictionary app How to Make A Dictionary app using JavaScript
Next Article Javascript convert date to long date format How to Javascript convert date to long date format
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

- Advertisement -

You Might Also Like

Responding to and Tracking Key Presses

How to Work With Responding to and Tracking Key Presses

February 5, 2023
Passing a JavaScript Value Between HTML Pages

Passing a JavaScript Value Between HTML Pages

February 3, 2023
Compare Objects in an Array

JavaScript Problem: Compare Objects in an Array

January 30, 2023
Switching Name Order Using Capturing Groups in Regular Expressions

Switching Name Order Using Capturing Groups in Regular Expressions

January 29, 2023
rocoderesrocoderes
Follow US

Copyright Β© 2022 All Right Reserved By Rocoderes

  • Home
  • About us
  • Contact us
  • Disclaimer
Join Us!

Subscribe to our newsletter and never miss our latest news, podcasts etc.

Zero spam, Unsubscribe at any time.
Welcome Back!

Sign in to your account

Lost your password?