Post
Ask Question

Show Image In TypeScript

Introduction

 
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
  1. class ShowImage {  
  2.  DisplayImage() {  
  3.   var myloc = new Image();  
  4.   myloc.useMap = "image.jpg";  
  5.   var img = document.createElement('img')  
  6.   img.setAttribute('src', myloc.useMap);  
  7.   img.setAttribute('style', "height:149px;width:280px;");  
  8.   document.body.appendChild(img);  
  9.  }  
  10. }  
  11. window.onload = () => {  
  12.  var button = document.createElement('button')  
  13.  button.innerText = "Show";  
  14.  button.onclick = function() {  
  15.   var image = new ShowImage();  
  16.   image.DisplayImage();  
  17.  }  
  18.  document.body.appendChild(button);  
  19. };  
ShowImage.aspx
  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="ShowImage.aspx.cs"  
  2. Inherits="ShowImageExample.ShowImage"%>  
  3.  <  
  4.  !DOCTYPEhtml >  
  5.  <  
  6.  htmlxmlns = "http://www.w3.org/1999/xhtml" >  
  7.  <  
  8.  headrunat = "server" >  
  9.  <  
  10.  title > < /title>  
  11.  <  
  12.  /head>  
  13.  <  
  14.  body >  
  15.  <  
  16.  formid = "form1"  
  17. runat = "server" >  
  18.  < 
  19.  div >  
  20.  <  
  21.  scriptsrc = "app.js" > < /script>  
  22.  <  
  23.  asp: LabelID = "Label1"  
  24. runat = "server"  
  25. Font - Italic = "True"  
  26. ForeColor = "Blue"  
  27. Text = "Click on show button for display image" > < /asp:Label>  
  28.  <  
  29.  /div>  
  30.  <  
  31.  /form>  
  32.  <  
  33.  /body>  
  34.  <  
  35.  /html>  
app.js
  1. var ShowImage = (function() {  
  2.  function ShowImage() {}  
  3.  ShowImage.prototype.DisplayImage = function() {  
  4.   var myloc = new Image();  
  5.   myloc.useMap = "image.jpg";  
  6.   var img = document.createElement('img');  
  7.   img.setAttribute('src', myloc.useMap);  
  8.   img.setAttribute('style', "height:149px;width:280px;");  
  9.   document.body.appendChild(img);  
  10.  };  
  11.  return ShowImage;  
  12. })();  
  13. window.onload = function() {  
  14.  var button = document.createElement('button');  
  15.  button.innerText = "Show";  
  16.  button.onclick = function() {  
  17.   var image = new ShowImage();  
  18.   image.DisplayImage();  
  19.  };  
  20.  document.body.appendChild(button);  
  21. };  
Output 1
 
Click on the Show button:
 
First-image.jpg
 
Output 2
 
final-image.jpg
 
Referenced By
http://www.typescriptlang.org/


Similar Articles