Reader Level:
ARTICLE

Show Image In TypeScript

Posted by Nitin Bhardwaj Articles | TypeScript December 13, 2012
In this article I explain how to show an image on a button click in a web-application in TypeScript.
  • 0
  • 0
  • 4394

Introduction

The Image control is used to display an image. TypeScript enables great tooling experiences for JavaScript development, whether you are writing client-side JavaScript to run on Windows, Internet Explorer, or any other browsers and operating systems, or writing server-side JavaScript to run on Windows Azure and other servers and clouds.

The following example shows how to display an image using a web application in TypeScript. In this example we create a myloc Image object and it's image path. Then we create an image element and set the attributes. Finally this example shows the Image on a button click. Let's use the following steps.

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click HTML Application for TypeScript under Visual C#.

Provide the name of your application as "ShowImageExample" and then click ok.

Step 2

After Step 1, right-click on "ShowImageExample". A pop up window is opened. Click on  "Add" -> "New Item" -> "Web Form". Provide the name of your WebForm as "ShowImage.aspx" and then click "Ok".

Step 3

After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, css file and aspx files and looks as in the following:

 solution-explorer.jpg

Coding

ShowImage.ts

class ShowImage

{

    DisplayImage() {

        var myloc = new Image();

        myloc.useMap = "image.jpg";

        var img = document.createElement('img')

        img.setAttribute('src', myloc.useMap);

        img.setAttribute('style',"height:149px;width:280px;");

        document.body.appendChild(img);

    }

}

 

window.onload = () =>

{

    var button = document.createElement('button')

    button.innerText = "Show";

    button.onclick = function ()

    {

        var image = new ShowImage();

        image.DisplayImage();

    }

    document.body.appendChild(button);  

};

 

ShowImage.aspx

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="ShowImage.aspx.cs"

Inherits="ShowImageExample.ShowImage"%>

 

<!DOCTYPEhtml>

 

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

    <title></title>

</head>

<body>

    <formid="form1"runat="server">

    <div>

    <scriptsrc="app.js"></script>

        <asp:LabelID="Label1"runat="server"Font-Italic="True"ForeColor="Blue"Text="Click on show button for display image"></asp:Label>

    </div>

    </form>

</body>

</html>

 

app.js

var ShowImage = (function () {

    function ShowImage() { }

    ShowImage.prototype.DisplayImage = function () {

        var myloc = new Image();

        myloc.useMap = "image.jpg";

        var img = document.createElement('img');

        img.setAttribute('src', myloc.useMap);

        img.setAttribute('style',"height:149px;width:280px;");

        document.body.appendChild(img);

    };

    return ShowImage;

})();

window.onload = function () {

    var button = document.createElement('button');

    button.innerText = "Show";

    button.onclick = function () {

        var image = new ShowImage();

        image.DisplayImage();

    };

    document.body.appendChild(button);

};

//@ sourceMappingURL=app.js.map

 

Output 1


Click on the Show button:


First-image.jpg


Output 2

 

final-image.jpg

Reference By

http://www.typescriptlang.org/

COMMENT USING

Trending up