Reader Level:
ARTICLE

Create a Transparency in Image Using HTML5

Posted by Manish Singh Articles | HTML 5 March 26, 2012
This is a simple application for beginners that shows how to create a transparent photo using a HTML 5 canvas and JavaScript tools.
  • 0
  • 0
  • 5366
Download Files:
 

Introduction

This is a simple application for beginners that shows how to create a transparent photo using a 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 a HTML 5 that is used to show images and text in HTML 5 applications. I hope this article helps to a create a transparent photo 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 "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

function Disimg()
{

    canvas = document.getElementById("myCanvas");

    if (canvas.getContext)
    {

         Rxt = canvas.getContext("2d");

         Img.onload = function ()
         {

             Rxt.drawImage(Img, 0, 0);

             GetColor();

             PutColor();

         }

         Img.src = "image/flower-18.jpg";

     }

}

Step 5: In this section we create two functions named "Getcolor" and "Putcolor" used to set a visualization of a transparent color image.

Code

function GetColor()
   {

      Img = Rxt.getImageData(0, 0, 420, 335);

      for (var i = 0; i < L * 4; i += 4)
        {

          Img.data[i + 3] = 50;

                   }

                    }

                function PutColor()
          {

                    Rxt.putImageData(Img, 0, 0);

                      }

                   function NoImage()
             {

                    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

<body onload="Disimg()" bgcolor="#ffcccc">

 <h1>

 Tom Developed a Transparent Image

 </h1>

 <img id="myPhoto" src="image/flower-18.jpg" onerror="NoImage()">

 <canvas id="myCanvas" width="420" height="335">

 </canvas>

</body>

body.gif

Step 7:
 In this section we write a complete demo code of a transparent color application.

Code
 

<html>

 <head>

 <title>Tom application</title>
 <script type
="text/javascript">

  var W = 400;

  var H = 400;

  var L = W * H;

  var Img = new Image();

function Disimg()
{

     canvas = document.getElementById("myCanvas");

     if (canvas.getContext)
      {

       Rxt = canvas.getContext("2d");

       Img.onload = function ()
         {

                 Rxt.drawImage(Img, 0, 0);

                 GetColor();

                 PutColor();

          }

          Img.src = "image/flower-18.jpg";

            }

 }

function GetColor()
     {

              Img = Rxt.getImageData(0, 0, 420, 335);

              for (var i = 0; i < L * 4; i += 4)
         {

           Img.data[i + 3] = 50;

               }

         }

   function PutColor()
      {

              Rxt.putImageData(Img, 0, 0);

          }

   function NoImage()
     {

          alert("Please put a .gif file in this folder and name it flower-18.jpg.");

        }

</script>

<style type="text/css">

#myPhoto

     {

       width: 418px;

       height: 324px;

      }

</style>

</head> 

<body onload="Disimg()" bgcolor="#ffcccc">

 <h1>

 Tom Developed a Transparent Image

 </h1>

 <img id="myPhoto" src="image/flower-18.jpg" onerror="NoImage()">

 <canvas id="myCanvas" width="420" height="335">

 </canvas>

</body>

</html>
 

Step 8: Press Ctrl + F5 run application on browser.

Output

Now this is a original image on canvas.

out1.gif

Now this a transparent image on canvas.

out3.gif

out2.gif

Resources

Here is some useful resources:

COMMENT USING

Trending up