Post
Ask Question

Add Texture on Image Using HTML5

Introduction

 
In this article, we will learn how to add texture to photos using HTML5 and JavaScript tools. We will begin with a small discussion of HTML. HTML is an acronym for "HyperText Markup Language" used to display data in a browser. HTML5 is an advanced version of HTML used to develop multimedia and animated applications. In a previous article, we used JavaScript. JavaScript was designed to add interactivity to HTML pages. JavaScript is usually embedded directly into HTML pages. I hope this article helps to show how to add texture to photos using HTML5 and JavaScript tools. If you are interested in adding texture to photos in your applications then go through the following steps.
 
Step 1: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "Texture.aspx".
folder.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 "Photos.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 the canvas and add texture.
  • Right-click on the Solution Explorer.
  • Add-> Add New Folder.
  • Set the name of the folder as "image".  
folder.gif
 
image.gif
 
vvvvvvvvvvvvvvv.gif
 
Step 4:  Now in this step we define a function named "Img" that is used to provide a canvas id and image path
 
Code
  1. function Img()  
  2.   {  
  3.     canvas = document.getElementById("myCanvas");  
  4.      if (canvas.getContext)  
  5.        {  
  6.          pxt = canvas.getContext("2d");  
  7.          MyImg.onload = function ()  
  8.            {  
  9.              pxt.drawImage(MyImg, 0, 0);  
  10.              ImgChange();  
  11.            }  
  12.            MyImg.src = "image/2.jpg";  
  13.       }  
  14.  } 
Step 5: In this section, we create a function named "ImgChange" that is used to set a texture and texture color on an image.
 
Code
  1. function ImgChange()  
  2.   {  
  3.     for (i = 0; i <= 1000; i++)  
  4.       {  
  5.          var x = Math.floor(Math.random() * 500);  
  6.          var y = Math.floor(Math.random() * 500);  
  7.          pxt.fillStyle = "white";  
  8.          pxt.beginPath();  
  9.          pxt.arc(x, y, 3, 0, Math.PI * 2, true);  
  10.          pxt.closePath();  
  11.          pxt.fill();  
  12.      }  
  13. } 
Step 6: In this section, we set a body part of a texture application.
 
Code
  1. <body onload="Img()" bgcolor="#cc6699">  
  2.   <h1>  
  3.     Tom application  
  4.   </h1>  
  5.   <img id="myPhoto" src="image/2.jpg">  
  6.   <canvas id="myCanvas" width="386" height="255">  
  7.   </canvas>  
  8. </body> 
bodyyyyyyyyyyyyyyyyyyyyyy.gif
 
Step 7: In this section set a complete demo code of a texture photo application.
 
Code
  1. <html>  
  2. <head>  
  3.  <title>Tom developed a </title>  
  4.  <script type="text/javascript">  
  5.  var MyImg = new Image();  
  6.  function Img()  
  7.   {  
  8.     canvas = document.getElementById("myCanvas");  
  9.      if (canvas.getContext)  
  10.        {  
  11.          pxt = canvas.getContext("2d");  
  12.          MyImg.onload = function ()  
  13.            {  
  14.              pxt.drawImage(MyImg, 0, 0);  
  15.              ImgChange();  
  16.            }  
  17.            MyImg.src = "image/2.jpg";  
  18.       }  
  19.  }  
  20. function ImgChange()  
  21.   {  
  22.     for (i = 0; i <= 1000; i++)  
  23.       {  
  24.          var x = Math.floor(Math.random() * 500);  
  25.          var y = Math.floor(Math.random() * 500);  
  26.          pxt.fillStyle = "white";  
  27.          pxt.beginPath();  
  28.          pxt.arc(x, y, 3, 0, Math.PI * 2, true);  
  29.          pxt.closePath();  
  30.          pxt.fill();  
  31.      }  
  32. }  
  33. </script>  
  34. <style type="text/css">  
  35.  #myPhoto  
  36.   {  
  37.     width: 386px;  
  38.     height: 255px;  
  39.   }  
  40. </style>  
  41. </head>  
  42. <body onload="Img()" bgcolor="#cc6699">  
  43.   <h1>  
  44.    Tom application  
  45.   </h1>  
  46.   <img id="myPhoto" src="image/2.jpg">  
  47.   <canvas id="myCanvas" width="386" height="255">  
  48.   </canvas>  
  49. </body>  
  50. </html> 
Step 8:  Press Ctrl + F5 to run an application in a browser.
 
Output
 
This is an original image.
 
out4.gif
 
This a texture image.
 
out 5.gif
 
out6.gif
 
out7.gif
 
Resources
 
Here are some useful resources:


Similar Articles