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 { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { getComponent } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.clickEventHandler = this.clickEventHandler.bind(this);
}
clickEventHandler() {
let signature = getComponent(document.getElementById('signature'), 'signature');
let sign = document.getElementById('text').value;
signature.load(sign);
}
render() {
return (<div id='container'>
<div id="signature-base-control">
<div id="input">
<input type="text" id="text" placeholder="Enter the Base64 or URL of signature"></input>
<ButtonComponent onClick={this.clickEventHandler} isPrimary={true}>Open</ButtonComponent>
</div>
<div id="signature-control">
<SignatureComponent id='signature'/>
</div>
</div>
</div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 React Signature</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="React Signature Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { getComponent, closest } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component<{}, {}> {
constructor(props: any) {
super(props);
this.clickEventHandler = this.clickEventHandler.bind(this);
}
public clickEventHandler(): void {
let signature: SignatureComponent = getComponent(document.getElementById('signature'), 'signature');
let sign: string = document.getElementById('text').value;
signature.load(sign);
}
public render() {
return (
<div id='container'>
<div id="signature-base-control">
<div id="input">
<input type="text" id="text" placeholder="Enter the Base64 or URL of signature"></input>
<ButtonComponent onClick={this.clickEventHandler} isPrimary={true}>Open</ButtonComponent>
</div>
<div id="signature-control">
<SignatureComponent id='signature'/>
</div>
</div>
</div>
);
}
};
ReactDOM.render(<App />, document.getElementById('element'));
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 { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { getComponent } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.animationSettings = { effect: 'Zoom', duration: 400, delay: 0 };
this.getSign = this.getSign.bind(this);
}
getSign() {
let signature = getComponent(document.getElementById('signature'), 'signature');
this.dialogInstance.content = signature.getSignature();
this.dialogInstance.show();
}
render() {
return (<div id='container'>
<div id="signature-control">
<SignatureComponent id='signature'/>
</div>
<ButtonComponent id="save" cssClass='e-primary' content='Save as Base64' onClick={this.getSign}/>
<DialogComponent id="defaultdialog" showCloseIcon={true} animationSettings={this.animationSettings} ref={dialog => this.dialogInstance = dialog} height='auto' header='Base64 of the signature' visible={false} width='80%'/>
</div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 React Signature</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="React Signature Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { getComponent, closest } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component<{}, {}> {
constructor(props: any) {
super(props);
this.animationSettings = { effect: 'Zoom', duration: 400, delay: 0 };
this.getSign = this.getSign.bind(this);
}
getSign() {
let signature: Signature = getComponent(document.getElementById('signature'), 'signature');
this.dialogInstance.content = signature.getSignature();
this.dialogInstance.show();
}
public render() {
return (
<div id='container'>
<div id="signature-control">
<SignatureComponent id='signature'/>
</div>
<ButtonComponent id="save" cssClass='e-primary' content='Save as Base64' onClick={this.getSign}/>
<DialogComponent id="defaultdialog" showCloseIcon={true} animationSettings={this.animationSettings} ref={dialog => this.dialogInstance = dialog} height='auto' header='Base64 of the signature' visible={false} width='80%'/>
</div>
);
}
};
ReactDOM.render(<App />, document.getElementById('element'));
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 { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import { getComponent } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.items = [
{
text: 'Png'
},
{
text: 'Jpeg'
},
{
text: 'Svg'
}
];
}
onSelect(args) {
let signature = getComponent(document.getElementById('signature'), 'signature');
signature.save(args.item.text, 'Signature');
}
render() {
return (<div id='container'>
<div>
<span>Sign here</span>
<SplitButtonComponent content="Save" iconCss='e-sign-icons e-save' items={this.items} select={this.onSelect.bind(this)}/>
</div>
<div id="signature-control">
<SignatureComponent id='signature'/>
</div>
</div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 React Signature</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="React Signature Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { MenuEventArgs, SplitButton, SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import { getComponent, closest } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component<{}, {}> {
public items: { text: string; }[];
constructor(props: any) {
super(props);
this.items = [
{
text: 'Png'
},
{
text: 'Jpeg'
},
{
text: 'Svg'
}];
}
onSelect(args:MenuEventArgs ): void {
let signature: Signature = getComponent(document.getElementById('signature'), 'signature');
signature.save(args.item.text as SignatureFileType, 'Signature');
}
public render() {
return (
<div id='container'>
<div>
<span>Sign here</span>
<SplitButtonComponent content="Save" iconCss='e-sign-icons e-save' items={this.items} select={this.onSelect.bind(this)} />
</div>
<div id="signature-control">
<SignatureComponent id='signature'/>
</div>
</div>
);
}
};
ReactDOM.render(<App />, document.getElementById('element'));
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 { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import { getComponent } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.items = [
{
text: 'Png'
},
{
text: 'Jpeg'
},
{
text: 'Svg'
}
];
}
onSelect(args) {
let signature = getComponent(document.getElementById('signature'), 'signature');
signature.save(args.item.text, 'Signature');
}
render() {
return (<div id='container'>
<div>
<span>Sign here</span>
<SplitButtonComponent content="Save" iconCss='e-sign-icons e-save' items={this.items} select={this.onSelect.bind(this)}/>
</div>
<div id="signature-control">
<SignatureComponent id='signature' backgroundColor="rgb(103 58 183)" saveWithBackground={true}/>
</div>
</div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 React Signature</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="React Signature Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { MenuEventArgs, SplitButton, SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import { getComponent, closest } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component<{}, {}> {
public items: { text: string; }[];
constructor(props: any) {
super(props);
this.items = [
{
text: 'Png'
},
{
text: 'Jpeg'
},
{
text: 'Svg'
}];
}
onSelect(args:MenuEventArgs ): void {
let signature: Signature = getComponent(document.getElementById('signature'), 'signature');
signature.save(args.item.text as SignatureFileType, 'Signature');
}
public render() {
return (
<div id='container'>
<div>
<span>Sign here</span>
<SplitButtonComponent content="Save" iconCss='e-sign-icons e-save' items={this.items} select={this.onSelect.bind(this)} />
</div>
<div id="signature-control">
<SignatureComponent id='signature' backgroundColor="rgb(103 58 183)" saveWithBackground={true}/>
</div>
</div>
);
}
};
ReactDOM.render(<App />, document.getElementById('element'));