Post
Ask Question

Create a Transparency in Image Using HTML5

Introduction

This simple application for beginners 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 use 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 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
    ASP dot NET web application

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".
    New item
    Html page

Step 3. In this step, we add a folder named "image" 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".
    New folder
    Image
    Image

Step 4. In this section, we create a function named "Disimg" that is used to set the height, width, and 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>

Tom developed a transparent Image

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 to run the application on the browser.

Output

Now, this is an original image on the canvas.

Tom developed

Now this is a transparent image on the canvas.

Transparent image on canvas

Transparent image

Resources

Here are some useful resources.


Similar Articles