Post
Ask Question

Rotate a Photo on Canvas Using HTML 5

Introduction

 
This is a simple application for beginners that help show how to rotate a photo on canvas using HTML 5 and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop a photo on canvas application. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. Canvas is an important tag of an HTML 5 that is used to show the image and text in an HTML 5 application. I hope this article helps to show how to rotate a photo on canvas using HTML 5 and CSS tools.
 
Step 1: First Open an HTML editor such as Notepad.
  • Open start->Notepad.
  • The name of the editor is "canvas".
notepad.gif
 
Step 2: Create a Folder on a desktop.
  • Right-click on desktop->new->Folder.
  • The name of the folder is "photo".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "Tom.aspx".
new application.gif
 
openapplication.gif
 
Step 4: Add an HTML file to your web application.
  • Right-click on Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "Image.html".
html.gif
 
Step 5: Add an image folder on a Tom canvas application.
  • Right-click of Solution explorer.
  • add->add folder.
  • The name of the folder is "image".
image.gif
 
Step 6: Add some js file in an application.
 
Code
  1. < script src = "Scripts/canvas.js"  
  2. type = "text/javascript" > < /script> <  
  3.  script src = "Scripts/canvas2.js"  
  4. type = "text/javascript" > < /script>  
Step 7: Now we have set a style of canvas curser properties that are background color, font-size, height, width and also set the properties of an image field.
 
Code
  1. <style type="text/css" media="screen">  
  2.   can.resize-ne { cursor: ne-resize; }  
  3.   can.resize-se { cursor: se-resize; }  
  4.   can.resize-sw { cursor: sw-resize; }  
  5.   can.resize-nw { cursor: nw-resize; }  
  6.   can.move { cursor: move; }  
  7.   can.default { cursor: default; }  
  8.   img    { display: block; visibility: hidden; position: absolute; top: -1000; left: -1000; }  
  9.   input { margin-left: 20px; }  
  10.   fieldset { width: 480px; float: left; }  
  11.  .fieldset { width: 400px; float: left; }  
  12.   #ft    { background-color: #eee; height: 70px; width: 99%;top: 0; left: 0; }  
  13.              #ft span { width: 100%; }  
  14. </style>  
Step 8: In this step set a canvas length and add an image according to image id.
 
Code
  1. can = new Canvas.Element();  
  2.  can.init('canvid1', { width: rex.getViewportWidth() - 5, height: rex.getViewportHeight() - 5 });  
  3.  img[img.length] = new Canvas.Img('img1', {});  
  4.  img[img.length] = new Canvas.Img('img2', {});  
  5.  img[img.length] = new Canvas.Img('img3', {});  
  6.  img[img.length] = new Canvas.Img('img4', {});  
  7.  img[img.length] = new Canvas.Img('img4', {});  
  8.  can.addImage(img[0]);  
  9.  can.addImage(img[1]);  
  10.  can.addImage(img[2]);  
  11.  can.setCanvasBackground(img[3]);  
  12.  can.addImage(img[4]);  
  13.  this.initEvents();  
  14. }  
Step 9: Now set the click event of the set, erase and cover checkbox; after click they all of performing an action.
 
Code  
  1. initEvents: function ()   
  2. {  
  3.   ctx.on('togglebg', 'click', this.toggleBg, this, true);  
  4.   ctx.on('S1', 'click', this.S1, this, true);  
  5.   ctx.on('T1', 'click', this.T1, this, true);  
  6.   ctx.on('T3', 'click', this.T3, this, true);  
  7.   ctx.on('T2', 'click', this.T2, this, true);  
  8.  }  
Step 10: Now in this step set a body of the canvas web page.
 
body.gif
 
Code
  1. <body id="canvasdemo" onload="" bgcolor="#ffccff">  
  2.     <canvas id="canvid1" ></canvas>  
  3.     <img id="img4" src="image/1.jpg" />  
  4.     <img id="img1" src="image/2.jpg" />  
  5.     <img id="img2" src="image/6.jpg" />  
  6.     <img id="img3" src="image/7.jpg" />  
  7.     <div id="ft">  
  8.         <div class="fieldset">     
  9.   </div>  
  10.         <fieldset>  
  11.             <legend style="background-color: #008080">Image</legend>  
  12.             <span style="background-color: #FF9999">  
  13.                 <input type="checkbox" name="some_name" value="" id="T1" />Erase  
  14.             </span>  
  15.             <span style="background-color: #99FF99">  
  16.                 <input type="checkbox" name="some_name"   
  17.         value="" id="T3" style="background-color: #FFCCFF" />Cover  
  18.             </span>  
  19.             <span style="background-color: #99FFCC">  
  20.                 <input type="checkbox" name="some_name" value="" id="T2" />Set  
  21.             </span>  
  22.         </fieldset>  
  23.         <span style="background-color: #FF99FF">  
  24.             <input type="checkbox" name="some_name" value="" id="S1" /> Cover show  
  25.             <span>  
  26.             </div>  
  27.         </body>  
Step 11: Press Ctrl + F5 to run the application in a browser.
 
Output
 
 1.gif
 
 2.gif
 
 3.gif
 
 4.gif
 
Resources
 
Here is some useful resource :


Similar Articles