Open save in Angular Signature component

28 Sep 202312 minutes to read

The Signature component supports to open the signature by using hosted/online URL or base64. And it also supports various save options like image, base64, and blob.

Open Signature

The signature component opens a pre-drawn signature as either base64 or hosted/ online URL using the load method. It supports the PNG, JPEG, and SVG image’s base64.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { SignatureComponent } from '@syncfusion/ej2-angular-inputs';

enableRipple(true);

@Component({
    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);
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SignatureModule } from '@syncfusion/ej2-angular-inputs';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule,ButtonModule,SignatureModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Save Signature

The Signature component saves the signature as base64, blob, and image like PNG, JPEG, and SVG.

Save as Base64

The getSignature method is used to get the signature as base64 with the PNG, JPEG, and SVG type. This can be loaded to signature using load method.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { SignatureComponent } from '@syncfusion/ej2-angular-inputs';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';

enableRipple(true);

@Component({
    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();
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
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';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule,DialogModule,ButtonModule,SignatureModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Save as Blob

The saveAsBlob method is used to saves the signature as Blob. It is defined as the chunk of binary data stored as a single entity in a database system.

Save As Image

The save method is used to saves the signature as an image. And it accepts file name and file type as parameter. The file type parameter supports PNG, JPEG, and SVG and the default file type is PNG.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
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({
    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');
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
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';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule,SplitButtonModule,ButtonModule,SignatureModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Save With Background

The saveWithBackground property is used to saves the signature with its background and its default value is true. So, by default the signature is saved with its background.

In the following sample, the background color is set as ‘rgb(103 58 183)’ and save with background as true.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
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({
    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');
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
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';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule,SplitButtonModule,ButtonModule,SignatureModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);