Post
Ask Question

Create Image Frame Gallery Using HTML5

Introduction

 
In this article, we will learn how to create an image frame gallery in an HTML5 canvas. Canvas is an important tag used to display images or text in an HTML5 application. We know that HTML5 is an advanced version of an 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.
  • Create an ASP. NET Web Application.
  • Name of "Image.aspx".
new.gif
 
application.gif
 
Step 2: Add an 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 canvas.
  • 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
  1. function Display()  
  2.   {  
  3.     var rxt = document.getElementById('canvas').getContext('2d');  
  4.     var IMG = new Image();  
  5.     IMG.src = 'image/3333333333333333333.gif';  
  6.     IMG.onload = function ()  
  7.     {  
  8.      for (i = 0; i < 5; i++)  
  9.      {  
  10.       for (j = 0; j < 4; j++)  
  11.       {  
  12.        rxt.drawImage(IMG, j * 160, i * 250, 200, 200);  
  13.          }  
  14.       }  
  15.     }  
  16.   } 
Step 5: In this section, we set a CSS used for the background, font and margin of a canvas body.
 
Code
  1. body  
  2.   {  
  3.      margin: 20px;  
  4.      font-family: arial,verdana;  
  5.      background: Gray;  
  6.    }  
  7.  h1  
  8.    {  
  9.     font-size: 140%;  
  10.     font-weight: normal;  
  11.     color: Gray;  
  12.     }  
  13.  h2  
  14.    {  
  15.     font-size: 100%;  
  16.     color: Red;  
  17.     }  
  18.  canvas  
  19.      {  
  20.       border: 2px solid #66FF99;  
  21.       float: left;  
  22.       margin-right: 20px;  
  23.    } 
Step 6: In this section, we will set a body content of an image frame gallery application.
 
Code
  1. <body onload="Display();" background="image/222222222222222222.gif">  
  2.   <h1 style="background-color: #FF99FF">  
  3.    Display a image frame on HTML5</h1>  
  4.    <div style="background-color: #CCCCFF">  
  5.    <canvas id="canvas" width="700" height="700"></canvas>  
  6.    <div style="float: left; background: #66FF99">  
  7.    <h2>  
  8.    Original image</h2>  
  9.    <img src="image/3333333333333333333.gif" style="background-color: #FFCCFF" />  
  10.    </div>  
  11.    </div>  
  12. </body> 
body.gif
 
Step 7: In this section is the complete demo code of an image frame gallery application.
 
Code
  1. <html>  
  2. <head>  
  3.  <title>Tom application</title>  
  4.  <script type="text/javascript">  
  5.  function Display()  
  6.   {  
  7.     var rxt = document.getElementById('canvas').getContext('2d');  
  8.     var IMG = new Image();  
  9.     IMG.src = 'image/3333333333333333333.gif';  
  10.     IMG.onload = function ()  
  11.     {  
  12.      for (i = 0; i < 5; i++)  
  13.      {  
  14.       for (j = 0; j < 4; j++)  
  15.       {  
  16.        rxt.drawImage(IMG, j * 160, i * 250, 200, 200);  
  17.          }  
  18.       }  
  19.     }  
  20.   }  
  21. body  
  22.   {  
  23.      margin: 20px;  
  24.      font-family: arial,verdana;  
  25.      background: Gray;  
  26.    }  
  27.  h1  
  28.    {  
  29.     font-size: 140%;  
  30.     font-weight: normal;  
  31.     color: Gray;  
  32.     }  
  33.  h2  
  34.    {  
  35.     font-size: 100%;  
  36.     color: Red;  
  37.     }  
  38.  canvas  
  39.      {  
  40.       border: 2px solid #66FF99;  
  41.       float: left;  
  42.       margin-right: 20px;  
  43.    }  
  44. <body onload="Display();" background="image/222222222222222222.gif">  
  45.   <h1 style="background-color: #FF99FF">  
  46.    Display a image frame on HTML5</h1>  
  47.    <div style="background-color: #CCCCFF">  
  48.    <canvas id="canvas" width="700" height="700"></canvas>  
  49.    <div style="float: left; background: #66FF99">  
  50.    <h2>  
  51.    Original image</h2>  
  52.    <img src="image/3333333333333333333.gif" style="background-color: #FFCCFF" />  
  53.    </div>  
  54.    </div>  
  55. </body>  
  56. </html> 
Step 8: Press Ctrl+F5 to run the application in a browser.
 
Output
 
out1.gif
 
out2.gif
 
out3.gif
 
Resources
 
Here are some useful resources:


Similar Articles