Create Simple Image Editor Using jQuery, HTML5 And CSS

Datetime:2016-08-23 03:03:06          Topic: CSS  jQuery  HTML5           Share

Tags:-jQuery HTML5 CSS

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 .

See 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.





About List