Create a Transparency in Image Using HTML5

Introduction

 
This is a simple application for beginners that shows how to create a transparent photo using an HTML 5 canvas and JavaScript 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 create a transparent photo on canvas applications. JavaScript was designed to add interactivity to HTML pages. JavaScript is usually embedded directly into HTML pages. Canvas is an important tag of an HTML 5 that is used to show images and text in HTML 5 applications. I hope this article helps to create a transparent photo 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 "Transparent.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.
  • Right-click on the Solution Explorer.
  • Add-> Add New Folder.
  • Set the name of the folder as "image".  
folder.gif
 
image.gif
 
imageadd.gif
 
Step 4: In this section, we create a function named "Disimg" that is used to set the height, width, length and also set a path of the image
 
Code
  1. function Disimg()  
  2. {  
  3.     canvas = document.getElementById("myCanvas");  
  4.     if (canvas.getContext)  
  5.     {  
  6.          Rxt = canvas.getContext("2d");  
  7.          Img.onload = function ()  
  8.          {  
  9.              Rxt.drawImage(Img, 0, 0);  
  10.              GetColor();  
  11.              PutColor();  
  12.          }  
  13.          Img.src = "image/flower-18.jpg";  
  14.      }  
Step 5: In this section we create two functions named "Getcolor" and "Putcolor" used to set a visualization of a transparent color image.
 
Code
  1. function GetColor() {  
  2.  Img = Rxt.getImageData(0, 0, 420, 335);  
  3.  for (var i = 0; i < L * 4; i += 4) {  
  4.   Img.data[i + 3] = 50;  
  5.  }  
  6. }  
  7.   
  8. function PutColor() {  
  9.  Rxt.putImageData(Img, 0, 0);  
  10. }  
  11.   
  12. function NoImage() {  
  13.  alert("Please put a .gif file in this folder and name it flower-18.jpg.");  
Step 6:  In this section, we create a body part of a transparent color image application.
 
Code
  1. <body onload="Disimg()" bgcolor="#ffcccc">  
  2.  <h1>  
  3.  Tom Developed a Transparent Image  
  4.  </h1>  
  5.  <img id="myPhoto" src="image/flower-18.jpg" onerror="NoImage()">  
  6.  <canvas id="myCanvas" width="420" height="335">  
  7.  </canvas>  
  8. </body> 
body.gif
 
Step 7:  In this section, we write a complete demo code of a transparent color application.
 
Code
  1. <html>  
  2.  <head>  
  3.  <title>Tom application</title>  
  4.  <script type="text/javascript">  
  5.   var W = 400;  
  6.   var H = 400;  
  7.   var L = W * H;  
  8.   var Img = new Image();  
  9. function Disimg()  
  10. {  
  11.      canvas = document.getElementById("myCanvas");  
  12.      if (canvas.getContext)  
  13.       {  
  14.        Rxt = canvas.getContext("2d");  
  15.        Img.onload = function ()  
  16.          {  
  17.                  Rxt.drawImage(Img, 0, 0);  
  18.                  GetColor();  
  19.                  PutColor();  
  20.           }  
  21.           Img.src = "image/flower-18.jpg";  
  22.             }  
  23.  }  
  24. function GetColor()  
  25.      {  
  26.               Img = Rxt.getImageData(0, 0, 420, 335);  
  27.               for (var i = 0; i < L * 4; i += 4)  
  28.          {  
  29.            Img.data[i + 3] = 50;  
  30.                }  
  31.          }  
  32.    function PutColor()  
  33.       {  
  34.               Rxt.putImageData(Img, 0, 0);  
  35.           }  
  36.    function NoImage()  
  37.      {  
  38.           alert("Please put a .gif file in this folder and name it flower-18.jpg.");  
  39.         }  
  40. </script>  
  41. <style type="text/css">  
  42. #myPhoto  
  43.      {  
  44.        width: 418px;  
  45.        height: 324px;  
  46.       }  
  47. </style>  
  48. </head>   
  49. <body onload="Disimg()" bgcolor="#ffcccc">  
  50.  <h1>  
  51.  Tom Developed a Transparent Image  
  52.  </h1>  
  53.  <img id="myPhoto" src="image/flower-18.jpg" onerror="NoImage()">  
  54.  <canvas id="myCanvas" width="420" height="335">  
  55.  </canvas>  
  56. </body>  
  57. </html> 
Step 8: Press Ctrl + F5 run application on browser.
 
Output
 
Now, this is an original image on the canvas.
 
out1.gif
 
Now this a transparent image on the canvas.
 
out3.gif
 
out2.gif
 
Resources
 
Here are some useful resources: