Reader Level:
ARTICLE

Creating Image Fading Using HTML5

Posted by Aditya Gaur Articles | HTML 5 June 08, 2012
In this article we create image fading using HTML5.
  • 0
  • 0
  • 10698

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:

<
body>
<
div><h3>Image Fading Using HTML5</h3>
<
input type="button" id="fade_button"value="Fade Button" />
</
div>
<
canvas id='mycanvas' width='650' height='450'></canvas>
<
script src='fadescript.js' type="text/javascript">
</
script>
</
body>

Step 2 : Then we use JavaScript to define the functionality. We use the invisiblity function to increase the visiblity 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:

 function incvisiblity(imgd, steps) {
     var x,
 dx,
 nxt,
 l = imgd.data.length;
     for (var a = 3; a < l; a += 4) {
         x = imgdnewcanvas.data[a];
         if (x > 0) {
             dx = imgd.data[a];
             nxt = Math.ceil(x / steps);
             if (dx + nxt <= x) {
                 imgd.data[a] += nxt;
             }
             else {
                 imgd.data[a] = x;
             } 
         } 
     } 
 }
 function
 startfade(context, imgd, steps, millisecondsPerStep) {
     var y = 0;
     for (var a = 3; a < imgd.data.length; a += 4) {
         imgd.data[a] = 0;
     }
     gap = setInterval(function () {
         y++;
         if (y > steps) {
             clearInterval(gap);
         }
         else {
             incvisiblity(imgd, steps);
             context.putImageData(imgd, 0, 0);
         }
     }, millisecondsPerStep); 

Step 3 : Now we apply CSS in the Head section of the HTML for looks and formatting of our HTML page, like this:

<
head>
    <title>Image Fading</title>
    <style>
    body
    {background:white;
     border:black;
     cursor:crosshair
        }
        #mycanvas
        {background:white
            }
    </style>
</
head>

The complete code looks like this:

//HTML code

<
html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Image Fading</title>
    <style>
    body
    {background:white;
     border:black;
     cursor:crosshair
        }
        #mycanvas
        {background:white
            }
    </style>
</
head>
 <body>
<
div><h3>Image Fading Using HTML5</h3>
<
input type="button" id="fade_button"value="Fade Button" />
</
div>
<
canvas id='mycanvas' width='650' height='450'></canvas>
<
script src='fadescript.js' type="text/javascript">
</
script>
</
body>
</html>

//JavaScript code
var img = new Image(),
 mycanvas = document.getElementById('mycanvas'),
 context = mycanvas.getContext('2d'),
 newcanvas = document.createElement('canvas'),
 offscreenContext = newcanvas.getContext('2d'),
 fade_button = document.getElementById('fade_button'),
 imgd,
 gap = null,
 imgdnewcanvas;
 function
incvisiblity(imgd, steps) {
     var x,
 dx,
 nxt,
 l = imgd.data.length;
     for (var a = 3; a < l; a += 4) {
         x = imgdnewcanvas.data[a];
         if (x > 0) {
             dx = imgd.data[a];
             nxt = Math.ceil(x / steps);
             if (dx + nxt <= x) {
                 imgd.data[a] += nxt;
             }
             else {
                 imgd.data[a] = x;
             }
         }
     }
 }
 function
startfade(context, imgd, steps, millisecondsPerStep) {
     var y = 0;
     for (var a = 3; a < imgd.data.length; a += 4) {
         imgd.data[a] = 0;
     }
     gap = setInterval(function () {
         y++;
         if (y > steps) {
             clearInterval(gap);
         }
         else {
             incvisiblity(imgd, steps);
             context.putImageData(imgd, 0, 0);
         }
     }, millisecondsPerStep);
 }
 fade_button.onclick = function () {
     imgdnewcanvas = offscreenContext.getImageData(0, 0, mycanvas.width, mycanvas.height);
     startfade(context, offscreenContext.getImageData(0, 0, mycanvas.width, mycanvas.height), 50, 1000 / 60);
 };
 img.src = 'color.jpg';
 img.onload = function () {
     newcanvas.width = mycanvas.width;
     newcanvas.height = mycanvas.height;
     offscreenContext.drawImage(img, 0, 0);
 }; 

Output
fade1.jpg
fade2.jpg
fade3.jpg

COMMENT USING

Trending up