Open and save signatures in Angular Signature component

26 Feb 202610 minutes to read

The Signature component supports opening pre-drawn signatures from base64 or hosted URLs, and saving signatures in multiple formats including images, base64, and blob.

Open Signature

Load a pre-drawn signature using the load method. It accepts base64-encoded images or hosted/online URLs. Supported formats: PNG, JPEG, and SVG base64 encoding.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SignatureModule } from '@syncfusion/ej2-angular-inputs'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { enableRipple } from '@syncfusion/ej2-base'
import { Component, ViewChild } from '@angular/core';
import { SignatureComponent } from '@syncfusion/ej2-angular-inputs';

enableRipple(true);

@Component({
imports: [
        FormsModule,ButtonModule,SignatureModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <div id="input">
                <input type="text" id="text" placeholder="Enter the Base64 or URL of signature" >
                <button ejs-button cssClass="e-btn e-primary" (click)="open()">Open</button>
            </div>
            <div id="signature-control">
            <canvas ejs-signature #signature id="signature"></canvas>
            </div>
            </div>`
})
export class AppComponent {
    @ViewChild('signature')
    public signature?: SignatureComponent;
    open(): void {
        let sign = (document.getElementById('text') as any).value;
        this.signature!.load(sign);
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Save Signature

Save signatures in multiple formats using the Signature component.

Save as Base64

Use the getSignature method to export the signature as base64. This format supports PNG, JPEG, and SVG types and can be reloaded using the load method.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SignatureModule } from '@syncfusion/ej2-angular-inputs'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { enableRipple } from '@syncfusion/ej2-base'
import { Component, ViewChild } from '@angular/core';
import { SignatureComponent } from '@syncfusion/ej2-angular-inputs';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';

enableRipple(true);

@Component({
imports: [
        FormsModule,DialogModule,ButtonModule,SignatureModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <h4>Sign here</h4>
        <div id ="signature-control">
            <canvas ejs-signature #signature id="signature"></canvas>
        </div>
        <button ejs-button id="save" cssClass="e-primary" (click)="onSave()">Save as Base64</button>
        <ejs-dialog #dialog header="Base64 of the signature" [animationSettings]="animationSettings" showCloseIcon='true' width="80%" visible="false"></ejs-dialog></div>`
})
export class AppComponent {
    @ViewChild('signature')
    public signature?: SignatureComponent;
    @ViewChild('dialog')
    public Dialog?: DialogComponent;
    public animationSettings: Object = { effect: 'Zoom',  duration: 400 };
    onSave() {
        this.Dialog!.content = this.signature!.getSignature();
        this.Dialog!.show();
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Save as Blob

Use the saveAsBlob method to export the signature as binary blob data for storage in databases or backend systems.

Save as Image

Use the save method to download the signature as an image file. This method accepts filename and file type parameters. Supported formats: PNG (default), JPEG, and SVG.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SignatureModule } from '@syncfusion/ej2-angular-inputs'
import { SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { enableRipple } from '@syncfusion/ej2-base'
import { Component, ViewChild } from '@angular/core';
import { SignatureComponent } from '@syncfusion/ej2-angular-inputs';
import { ItemModel, MenuEventArgs } from '@syncfusion/ej2-angular-splitbuttons';
import { Signature, SignatureFileType } from '@syncfusion/ej2-inputs';

enableRipple(true);

@Component({
imports: [
        FormsModule,SplitButtonModule,ButtonModule,SignatureModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <div>
            <span>Sign here</span>
            <ejs-splitbutton content="Save" [items]='items' iconCss="e-sign-icons e-save" (select)="onSelect($event)"></ejs-splitbutton>
        </div>
        <div id ="signature-control">
            <canvas ejs-signature #signature id="signature"></canvas>
        </div>
        </div>`
})
export class AppComponent {
    @ViewChild('signature')
    public signature?: SignatureComponent;
    public items: ItemModel[] = [
    { text: 'Png'},
    { text: 'Jpeg'},
    { text: 'Svg'}
    ];
    onSelect(args: MenuEventArgs) {
        this.signature?.save(args.item.text as SignatureFileType, 'Signature');
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Save With Background

Use the saveWithBackground property to include or exclude the background when saving. Default value: true (background is saved by default).

The following example sets a purple background and saves the signature with it.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SignatureModule } from '@syncfusion/ej2-angular-inputs'
import { SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { enableRipple } from '@syncfusion/ej2-base'
import { Component, ViewChild } from '@angular/core';
import { SignatureComponent } from '@syncfusion/ej2-angular-inputs';
import { ItemModel, MenuEventArgs } from '@syncfusion/ej2-angular-splitbuttons';
import { Signature, SignatureFileType } from '@syncfusion/ej2-inputs';

enableRipple(true);

@Component({
imports: [
        FormsModule,SplitButtonModule,ButtonModule,SignatureModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <div>
            <span>Sign here</span>
            <ejs-splitbutton content="Save" [items]='items' iconCss="e-sign-icons e-save" (select)="onSelect($event)"></ejs-splitbutton>
        </div>
        <div id ="signature-control">
            <canvas ejs-signature #signature id="signature" backgroundColor="rgb(103 58 183)" saveWithBackground="true"></canvas>
        </div>
        <div>`
})
export class AppComponent {
    @ViewChild('signature')
    public signature?: SignatureComponent;
    public items: ItemModel[] = [
    { text: 'Png'},
    { text: 'Jpeg'},
    { text: 'Svg'}
    ];
    onSelect(args: MenuEventArgs) {
        this.signature?.save(args.item.text as SignatureFileType, 'Signature');
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));