30.5 C
Gujarat
HomeJavascriptJavaScript Image Editor with HTML canvas

JavaScript Image Editor with HTML canvas

πŸ‘‹ Hello guys today we will learn how to make a 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.

πŸ‘‰ 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 πŸ‘‡

Adminhttps://rocoderes.com
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
RELATED ARTICLES

10 COMMENTS

  1. I’m impressed, I have to admit. Seldom do I come across a blog that’s both educative and entertaining,
    and let me tell you, you have hit the nail on the head.
    The issue is an issue that not enough men and
    women are speaking intelligently about. Now i’m very
    happy I found this in my search for something regarding this.

  2. I was suggested this web site by my cousin. I am not certain whether this submit is written by means of him as nobody else know such designated approximately my trouble.

    You’re wonderful! Thanks!

  3. I really enjoy this theme you have got going on on your site. What is the name of the template by the way? I was thinking of using this style for the website I am going to put together for my school project.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

15,000FansLike
5,000FollowersFollow
534FollowersFollow
- Advertisment -spot_img

Subscribe to our newsletter

To be updated with all the latest news, offers and special announcements.

Most Popular