Post
Ask Question

Creating Image Negative Using HTML5

Introduction

 
In this article, we learn how to create a negative of an image using HTML5. When the user clicks on the button, the image is inverted to a negative and when the user clicks again, the image is inverted back to original.
 
Step 1: First we define a body for the HTML using the canvas element and a button, like this:
  1. <body>  
  2.    <div>  
  3.       <h1>Creating Image Negative</h1>  
  4.       <input id='Neg_Button' type='button' value="Negative" onclick="return Neg_Button_onclick()" />  
  5.    </div>  
  6.    <canvas id='canvas' width='800' height='750'>  
  7.       Sorry,Canvas is not supported in this Browser..  
  8.    </canvas>  
  9.    <script src='negative_script.js' ></script>  
  10. </body> 
Step 2: Then we define JavaScript to add functionality in our HTML page. We use the getElementById method to get the canvas and button id and the Canvas.getContext('2d') method returns an object that provides methods and properties for drawing and image manipulations on the canvas element, like this:
  1. var canvas = document.getElementById('canvas'),  
  2. context = canvas.getContext('2d'),  
  3. image = new Image(),  
  4. Neg_Button = document.getElementById('Neg_Button'); ;  
  5. image.src = 'bridge.jpg'; 
Step 3: Now we define a function in JavaScript. The Neg_Button_onclick function is used to set the red, green and blue values of each pixel to 255 minus the current value so that setting inverts the colors. The getImageData method gives you access to pixels of an image and the setImageData method is used to put pixels back in the image, like this:
  1. function Neg_Button_onclick() {  
  2.     var idata = context.getImageData(0, 0, canvas.width, canvas.height),  
  3.     data = idata.data;  
  4.     for (i = 0; i <= data.length - 4; i += 4) {  
  5.         data[i] = 255 - data[i]  
  6.         data[i + 1] = 255 - data[i + 1];  
  7.         data[i + 2] = 255 - data[i + 2];  
  8.     }  
  9.     context.putImageData(idata, 0, 0);  
  10. } 
Step 4 : We use CSS in the Head section for describing the the look and formatting to our HTML page, like this:
  1. <style>  
  2.    body  
  3.     {background:rgba(200, 305, 500, 0.3);      
  4.         }  
  5.      #canvas  
  6.      {margin: 10px 20px 0px 20px;  
  7.       border: thin solid #aaaaaa;  
  8.       cursor: crosshair;  
  9.         }  
  10.         #Neg_Button  
  11.         {  
  12.             width: 94px;  
  13.             right: 0px;  
  14.             top: 79px;  
  15.             left: 10px;  
  16.             height: 29px;  
  17.         }  
  18.     </style> 
The complete code looks like this:
  1. // HTML Code  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Creating Image Negative</title>  
  5.     <script type="javascript" type="text/javascript">  
  6.     </script>  
  7. <style>  
  8.    body  
  9.     {background:rgba(200, 305, 500, 0.3);      
  10.         }  
  11.      #canvas  
  12.      {margin: 10px 20px 0px 20px;  
  13.       border: thin solid #aaaaaa;  
  14.       cursor: crosshair;  
  15.         }  
  16.         #Neg_Button  
  17.         {  
  18.             width: 94px;  
  19.             right: 0px;  
  20.             top: 79px;  
  21.             left: 10px;  
  22.             height: 29px;  
  23.         }  
  24.     </style>  
  25. <body>  
  26. <div><h1>Creating Image Negative</h1>  
  27. <input id='Neg_Button' type='button' value="Negative" onclick="return Neg_Button_onclick()" />  
  28. </div>  
  29. <canvas id='canvas' width='800' height='750'>  
  30. Sorry,Canvas is not supported in this Browser..  
  31. </canvas>  
  32. <script src='negative_script.js' ></script>  
  33. </body>  
  34.   
  35. // JavaScript Code  
  36. var canvas = document.getElementById('canvas'),  
  37. context = canvas.getContext('2d'),  
  38. image = new Image(),  
  39. Neg_Button = document.getElementById('Neg_Button'); ;  
  40. image.src = 'bridge.jpg';  
  41. function Neg_Button_onclick() {  
  42.     var idata = context.getImageData(0, 0, canvas.width, canvas.height),  
  43.     data = idata.data;  
  44.     for (i = 0; i <= data.length - 4; i += 4) {  
  45.         data[i] = 255 - data[i]  
  46.         data[i + 1] = 255 - data[i + 1];  
  47.         data[i + 2] = 255 - data[i + 2];  
  48.     }  
  49.     context.putImageData(idata, 0, 0);  
  50. }  
  51. image.onload = function () {  
  52.     context.clearRect(0, 0, canvas.width, canvas.height);  
  53.     context.drawImage(image, 0, 0, image.width, image.height, 0, 0, context.canvas.width, context.canvas.height);  
  54. }; 
Output
 
Image Negative1.jpg
 
After button click
 
ImageNegative2 


Similar Articles