✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Create Simple Image Editor Using jQuery, HTML5 And CSS

Last Updated : Jul 1, 2023

IN - jQuery HTML5 CSS | Written & Updated By - Ashish

In this tutorial we will show you how to create a simple image editor using jQuery, HTML5 and CSS.

We use different CSS filter like Grayscale, Blur, Exposure(brightness), Sepia and Opacity to edit the image you can add more effects if you want. You may also like zoom image using jQuery.

Create Simple Image Editor Using jQuery, HTML5 And CSS

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Create Image Editor It Takes Only Two Steps:-

  1. Make a HTML file and define markup and scripting
  2. Make a CSS file and define styling

Step 1. Make a HTML file and define markup and scripting

We make a HTML file and save it with a name editor.html 

<html>
<head>
<link href="editor_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 $(".range").change(add_filter).mousemove(add_filter);
});
	
function add_filter()
{
 var grayscale_val=$("#grayscale").val();
 var blur_val=$("#blur").val();
 var exposure_val=$("#exposure").val();
 var sepia_val=$("#sepia").val();
 var opacity_val=$("#opacity").val();

 $("#edit_image").css("-webkit-filter","grayscale("+grayscale_val+"%) blur("+blur_val+"px) brightness("+exposure_val+"%) sepia("+sepia_val+"%) opacity("+opacity_val+"%)");
}
</script>
</head>
<body>
<div id="wrapper">

<div id="edit_controls">
 <li>GrayScale<br><input id="grayscale" class="range" type="range" min="0" max="100" value="0"></li>
 
 <li>Blur<br><input id="blur" class="range" type="range" min="0" max="10" value="0"></li>
 
 <li>Exposure<br><input id="exposure" class="range" type="range" min="0" max="200" value="100"></li>
 
 <li>Sepia<br><input id="sepia" class="range" type="range" min="0" max="100" value="0"></li>
 
 <li>Opacity<br><input id="opacity" class="range" type="range" min="0" max="100" value="100"></li>
</div>
 
<div id="image_div">
 <img src="images/image2.jpg" id="edit_image">
</div>

</div>
</body>
</html>

In this step we create two divs one for editor controls and another is for image. In 'edit_controls' div we create five range fields to apply five different filters to our image.

We use add_filter() function to apply filter to image by getting every range field value and then change the styling of image and applying that filters to image. You may also like resize and crop image using PHP and jQuery.

Step 2. Make a CSS file and define styling

We make a CSS file and save it with a name editor_style.css 

body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#E6E6E6;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
}
#edit_controls
{
 background-color:#A4A4A4;
 float:left;
 width:500px;
 margin-left:248px;
}
#edit_controls li
{
 list-style-type:none;
 display:inline-block;
 margin:0px;
 padding:0px;
 margin:10px;
 color:white;
}
#image_div img
{
 width:500px;	
}

You can view our take screenshot using HTML5 tutorial to save the edited image.

Thats all, this is how to create simple image editor using jQuery, HTML5 and CSS. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on jquery image editor helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →