Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
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.
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.
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 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>`
})
export class AppComponent {
@ViewChild('signature')
public signature: SignatureComponent;
open(): void {
let sign = document.getElementById('text').value;
this.signature.load(sign);
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SignatureComponent } 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
],
declarations: [AppComponent, SignatureComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);The Signature component saves the signature as base64, blob, and image like PNG, JPEG, and SVG.
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.
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: `<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>`
})
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();
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SignatureComponent } 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
],
declarations: [AppComponent, SignatureComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);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.
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.
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>
<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>`
})
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');
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SignatureComponent } 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
],
declarations: [AppComponent, SignatureComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);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.
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>
<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>`
})
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');
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SignatureComponent } 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
],
declarations: [AppComponent, SignatureComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);