Create Image Frame Gallery Using HTML5


Introduction

In this article we will learn how to create an image frame gallery in a HTML5 canvas. Canvas is an important tag used to display images or text in a HTML5 application. We know that HTML5 is an advance version of a HTML that is used to develop multimedia and animated applications. This article is intended to help with the use of HTML5 tools to create image frame gallery applications. We developed this application with the help of CSS; CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. JavaScript was designed to add interactivity to HTML pages. JavaScript is usually embedded directly into HTML pages. I hope this article helps to create an image frame gallery on canvas using HTML 5 and JavaScript tools.

Step 1: Open Visual Studio.

  • Go to file -> New->Projects.
  • Crete an ASP. NET Web Application.
  • Name of "Image.aspx".

new.gif

application.gif

Step 2:
Add a HTML file to your web application.

  • Right-click on the Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "gallery.html".

css.gif

html.gif

Step 3:
In this step we add a folder named "image" that is used to store all images. The images are used to display on camvas.

  • Right-click on the Solution Explorer.
  • Add-> Add New Folder.
  • Set the name of the folder as "image". 

folder.gif

image foledr.gif

imagesssssssssssss.gif

Step 4: 
In this section we will create a function named "Display" that is used to provide a canvas id and image path.

Code

function Display()
  {

    var rxt = document.getElementById('canvas').getContext('2d');

    var IMG = new Image();

    IMG.src = 'image/3333333333333333333.gif';

    IMG.onload = function ()
    {

     for (i = 0; i < 5; i++)
     {

      for (j = 0; j < 4; j++)
      {

       rxt.drawImage(IMG, j * 160, i * 250, 200, 200);

         }

      }

    }

  }

 

Step 5: In this section we set a CSS used for the background, font and margin of a canvas body.

Code

body

  {

     margin: 20px;

     font-family: arial,verdana;

     background: Gray;

   }

 h1

   {

    font-size: 140%;

    font-weight: normal;

    color: Gray;

    }

 h2

   {

    font-size: 100%;

    color: Red;

    }

 canvas

     {

      border: 2px solid #66FF99;

      float: left;

      margin-right: 20px;

   }

 

Step 6: In this section we will set a body content of an image frame gallery application.

Code

<body onload="Display();" background="image/222222222222222222.gif">

  <h1 style="background-color: #FF99FF">

   Display a image frame on HTML5</h1>

   <div style="background-color: #CCCCFF">

   <canvas id="canvas" width="700" height="700"></canvas>

   <div style="float: left; background: #66FF99">

   <h2>

   Original image</h2>

   <img src="image/3333333333333333333.gif" style="background-color: #FFCCFF" />

   </div>

   </div>

</body>


 body.gif

Step 7:
In this section is the complete demo code of an image frame gallery application.

Code

<html>

<head>

 <title>Tom application</title>

 <script type="text/javascript">

 function Display()
  {

    var rxt = document.getElementById('canvas').getContext('2d');

    var IMG = new Image();

    IMG.src = 'image/3333333333333333333.gif';

    IMG.onload = function ()
    {

     for (i = 0; i < 5; i++)
     {

      for (j = 0; j < 4; j++)
      {

       rxt.drawImage(IMG, j * 160, i * 250, 200, 200);

         }

      }

    }

  }

body

  {

     margin: 20px;

     font-family: arial,verdana;

     background: Gray;

   }

 h1

   {

    font-size: 140%;

    font-weight: normal;

    color: Gray;

    }

 h2

   {

    font-size: 100%;

    color: Red;

    }

 canvas

     {

      border: 2px solid #66FF99;

      float: left;

      margin-right: 20px;

   }

<body onload="Display();" background="image/222222222222222222.gif">

  <h1 style="background-color: #FF99FF">

   Display a image frame on HTML5</h1>

   <div style="background-color: #CCCCFF">

   <canvas id="canvas" width="700" height="700"></canvas>

   <div style="float: left; background: #66FF99">

   <h2>

   Original image</h2>

   <img src="image/3333333333333333333.gif" style="background-color: #FFCCFF" />

   </div>

   </div>

</body>

</html>

 

Step 8: Press Ctrl+F5 to run the application in a browser.

Output

out1.gif

out2.gif

out3.gif

Resources

Here is some useful resources: