Open and Save in React Signature component

03 Oct 2022 / 4 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.

Source

Preview

index.jsx

index.html

index.tsx

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.3.47/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/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'));

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.

Source

Preview

index.jsx

index.html

index.tsx

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.3.47/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/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'));

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.

Source

Preview

index.jsx

index.html

index.tsx

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.3.47/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/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'));

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.

Source

Preview

index.jsx

index.html

index.tsx

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.3.47/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/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'));

Contents

Open Signature
Save Signature
Save as Base64
Save as Blob
Save as Image
Save with Background

Contents

Open Signature
Save Signature
Save as Base64
Save as Blob
Save as Image
Save with Background

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!