Convert Base64 to Image using Angular - A Step by Step Guide | CodeLSC

Step by Step Video Tutorial:

Base64 is a widely used binary-to-text encoding scheme that represents binary data in an ASCII string format. It is commonly used to transmit data over the web and can also be used to store images. However, to display an image on the web, it needs to be converted back to its original binary format. This guide will show you how to convert Base64 to Image using Angular.

Prerequisites

• Basic knowledge of Angular
• Base64 string of an image

Step 1: Create a new Angular project

To get started, you need to have Angular installed on your machine. If you don't have it installed, you can follow this guide to install it.

Once you have Angular installed, open your terminal or command prompt and run the following command to create a new Angular project:

ng new base64-to-image

 

Step 2: Create a Component

In this step, we'll create a component that will be responsible for converting the Base64 string to an image. Run the following command in your terminal or command prompt:

ng generate component base64-to-image

 

Step 3: Implement the HTML Template

Now, open the base64-to-image.component.html file and paste the following code:

<div id="main_div">   <!-- Title div -->   <div class="title">{{ title }}</div>     <!-- Container div -->   <div class="container">     <!-- Input field for base64 string -->     <input       type="text"       [(ngModel)]="base64String"       class="input-field"       placeholder="base64 string"     />       <!-- Convert button, disabled if base64 string is not valid -->     <button       (click)="convertToImage()"       [disabled]="!isValidString()"       class="convert-button"     >       Convert     </button>       <!-- Display image -->     <img [src]="imageUrl" /><br />       <!-- Download button for image, visible only if image is valid -->     <div>       <a         [href]="imageUrl"         *ngIf="isValidImage()"         [download]="'image.jpeg'"         class="download-button"         >Download</a       >     </div>   </div> </div>

 

Step 4: Implement the TypeScript Code

In this step, we'll be implementing the TypeScript code for the component we created in step 2. The TypeScript code defines the logic for converting the Base64 string to an image and displaying it on the web page.

Let's break down the code into different parts:

Variable Declarations:

 

base64String: string; imageUrl: any;

 

The base64String variable is used to store the Base64 string input by the user. It is declared as a string. The imageUrl variable is used to store the URL of the image after it is converted from the Base64 string. It is declared as type any so it can store any type of data.

convertToImage() Method:

 

convertToImage() {   this.imageUrl = this.base64String; }

 

The convertToImage() method sets the value of the imageUrl variable to the value of the base64String variable. This is the core logic of converting the Base64 string to an image.

isValidString() Method:

 

isValidString() {   return this.base64String && this.base64String.length > 0; }

 

The isValidString() method returns true if the base64String variable is not null and has a length greater than 0. It is used to determine if the Base64 string input by the user is valid or not.

isValidImage() Method:

 

isValidImage() {   return this.imageUrl && this.imageUrl.length > 0; }

 

The isValidImage() method returns true if the imageUrl variable is not null and has a length greater than 0. It is used to determine if the image has been successfully converted from the Base64 string or not.

With these four parts, the complete TypeScript code for the component will look like this:

export class AppComponent {   // Define the title of the application   title = 'Base64 to Image Converter';     // Initialize the base64String variable as a string   base64String: string;     // Initialize the imageUrl variable as any type   imageUrl: any;     // Define the convertToImage() method   convertToImage() {     // Set the imageUrl variable to the value of the base64String variable     this.imageUrl = this.base64String;   }     // Define the isValidString() method   isValidString() {     // Return true if the base64String variable is not null and has a length greater than 0     return this.base64String && this.base64String.length > 0;   }     // Define the isValidImage() method   isValidImage() {     // Return true if the imageUrl variable is not null and has a length greater than 0     return this.imageUrl && this.imageUrl.length > 0;   } }

 

Step 5: Add Styles In this step

we'll add some styles to make the UI look nice. Open the base64-to-image.component.css file and paste the following code:

@import url('https://fonts.googleapis.com/css2?family=Bleeding+Cowboys&display=swap');   .title {   font-family: 'Bleeding Cowboys', cursive;   font-size: 48px;   position: relative;   text-align: center; } .container {   display: flex;   flex-direction: column;   align-items: center;   padding: 20px; }   .input-field {   width: 60%;   height: 40px;   margin-bottom: 20px;   padding: 10px;   font-size: 16px;   border: 1px solid gray;   border-radius: 5px; }   .convert-button {   width: 60%;   height: 40px;   margin-bottom: 20px;   background-color: rgb(2, 128, 255);   color: white;   font-size: 16px;   border: none;   border-radius: 5px;   cursor: pointer; }   .convert-button:hover {   background-color: rgb(12, 194, 255); }   .download-button {   margin-bottom: 20px;   background-color: rgb(0 177 51);   color: white;   font-size: 16px;   border: none;   border-radius: 5px;   cursor: pointer;   text-decoration: none;   padding: 15%; }   .download-button:hover {   background-color: rgb(2 211 62); }   img {   width: 60%;   margin-top: 20px;   border: 1px solid gray;   border-radius: 5px; }   @media only screen and (max-width: 600px) {   .input-field,   img {     width: 100%;   } }   #main_div {   margin: 5% auto;   width: 70%;   border: 1px solid grey;   border-radius: 1%;   background-image: url('https://wallpaperaccess.com/full/809214.jpg');   background-size: cover;   background-repeat: no-repeat;   display: flex;   flex-direction: column;   align-items: center;   justify-content: center; } .input-field:focus {   outline: none;   border-color: #2e7bf6;   box-shadow: 0 0 20px #4d90fe; }

 

Step 6: Serve the Application

To run the application, open your terminal or command prompt and run the following command:

ng serve

Open your browser and navigate to http://localhost:4200/. You should see the Base64 to Image converter application. Try entering a Base64 string of an image and clicking the Convert button. You should see the image displayed. You can also download the image by clicking the Download button.

Conclusion:

 In this guide, we showed you how to convert Base64 to Image using Angular. This can be useful for displaying images stored in a database as Base64 strings. With the steps outlined in this guide, you should be able to implement this functionality in your own Angular projects.

Stackblitz Exmple: https://stackblitz.com/edit/angular-ivy-keudnf?embed=1&file=src/app/app.component.ts