Post
Ask Question

Creating Image Fading Using HTML5

Introduction

 
In this article, we learn how to create image fading using HTML5. We use the canvas element of HTML5 and define its id, width and height attributes. When the user clicks on the button, the image fades.
 
Step 1 : First we define the body of the HTML using a canvas element, like this:
  1. <body>  
  2. <div><h3>Image Fading Using HTML5</h3>  
  3. <input type="button" id="fade_button"value="Fade Button" />  
  4. </div>  
  5. <canvas id='mycanvas' width='650' height='450'></canvas>  
  6. <script src='fadescript.js' type="text/javascript">  
  7. </script>  
  8. </body> 
Step 2: Then we use JavaScript to define the functionality. We use the invisibility function to increase the visibility of the image; the startfade method is used to do the image fading. We create the image as an offscrean canvas and then pixels are captured from that canvas, like this:
  1. function incvisiblity(imgd, steps) {  
  2.  var x, dx, nxt, l = imgd.data.length;  
  3.  for (var a = 3; a < l; a += 4) {  
  4.   x = imgdnewcanvas.data[a];  
  5.   if (x > 0) {  
  6.    dx = imgd.data[a];  
  7.    nxt = Math.ceil(x / steps);  
  8.    if (dx + nxt <= x) {  
  9.     imgd.data[a] += nxt;  
  10.    } else {  
  11.     imgd.data[a] = x;  
  12.    }  
  13.   }  
  14.  }  
  15. }  
  16.   
  17. function startfade(context, imgd, steps, millisecondsPerStep) {  
  18.  var y = 0;  
  19.  for (var a = 3; a < imgd.data.length; a += 4) {  
  20.   imgd.data[a] = 0;  
  21.  }  
  22.  gap = setInterval(function() {  
  23.   y++;  
  24.   if (y > steps) {  
  25.    clearInterval(gap);  
  26.   } else {  
  27.    incvisiblity(imgd, steps);  
  28.    context.putImageData(imgd, 0, 0);  
  29.   }  
  30.  }, millisecondsPerStep); 
Step 3: Now we apply CSS in the Head section of the HTML for looks and formatting of our HTML page, like this:
  1. <head>  
  2.     <title>Image Fading</title>  
  3.     <style>  
  4.     body  
  5.     {background:white;  
  6.      border:black;  
  7.      cursor:crosshair  
  8.         }  
  9.         #mycanvas  
  10.         {background:white  
  11.             }  
  12.     </style>  
  13. </head> 
The complete code looks like this:
  1. //HTML code  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Image Fading</title>  
  5.     <style>  
  6.     body  
  7.     {background:white;  
  8.      border:black;  
  9.      cursor:crosshair  
  10.         }  
  11.         #mycanvas  
  12.         {background:white  
  13.             }  
  14.     </style>  
  15. </head>  
  16.  <body>  
  17. <div><h3>Image Fading Using HTML5</h3>  
  18. <input type="button" id="fade_button"value="Fade Button" />  
  19. </div>  
  20. <canvas id='mycanvas' width='650' height='450'></canvas>  
  21. <script src='fadescript.js' type="text/javascript">  
  22. </script>  
  23. </body>  
  24. </html>  
  25.   
  26. //JavaScript code  
  27. var img = new Image(),  
  28.  mycanvas = document.getElementById('mycanvas'),  
  29.  context = mycanvas.getContext('2d'),  
  30.  newcanvas = document.createElement('canvas'),  
  31.  offscreenContext = newcanvas.getContext('2d'),  
  32.  fade_button = document.getElementById('fade_button'),  
  33.  imgd,  
  34.  gap = null,  
  35.  imgdnewcanvas;  
  36.  function incvisiblity(imgd, steps) {  
  37.      var x,  
  38.  dx,  
  39.  nxt,  
  40.  l = imgd.data.length;  
  41.      for (var a = 3; a < l; a += 4) {  
  42.          x = imgdnewcanvas.data[a];  
  43.          if (x > 0) {  
  44.              dx = imgd.data[a];  
  45.              nxt = Math.ceil(x / steps);  
  46.              if (dx + nxt <= x) {  
  47.                  imgd.data[a] += nxt;  
  48.              }  
  49.              else {  
  50.                  imgd.data[a] = x;  
  51.              }  
  52.          }  
  53.      }  
  54.  }  
  55.  function startfade(context, imgd, steps, millisecondsPerStep) {  
  56.      var y = 0;  
  57.      for (var a = 3; a < imgd.data.length; a += 4) {  
  58.          imgd.data[a] = 0;  
  59.      }  
  60.      gap = setInterval(function () {  
  61.          y++;  
  62.          if (y > steps) {  
  63.              clearInterval(gap);  
  64.          }  
  65.          else {  
  66.              incvisiblity(imgd, steps);  
  67.              context.putImageData(imgd, 0, 0);  
  68.          }  
  69.      }, millisecondsPerStep);  
  70.  }  
  71.  fade_button.onclick = function () {  
  72.      imgdnewcanvas = offscreenContext.getImageData(0, 0, mycanvas.width, mycanvas.height);  
  73.      startfade(context, offscreenContext.getImageData(0, 0, mycanvas.width, mycanvas.height), 50, 1000 / 60);  
  74.  };  
  75.  img.src = 'color.jpg';  
  76.  img.onload = function () {  
  77.      newcanvas.width = mycanvas.width;  
  78.      newcanvas.height = mycanvas.height;  
  79.      offscreenContext.drawImage(img, 0, 0);  
  80.  };   
Output
 
fade1 
 
fade2 
 
fade3 


Similar Articles