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".
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".
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".
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>
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 an original image on the canvas.
Now this a transparent image on the canvas.
Resources
Here are some useful resources: