Open save in React Signature component

30 Jan 202319 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.

index.jsx

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";
function App() {
    function clickEventHandler() {
        let signature = getComponent(document.getElementById('signature'), 'signature');
        let sign = document.getElementById('text').value;
        signature.load(sign);
    }
    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={clickEventHandler} isPrimary={true}>Open</ButtonComponent>
                </div>
                <div id="signature-control">
                    <SignatureComponent id='signature'/>
                </div>
            </div>
        </div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

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";

function App() {
    function clickEventHandler(): void {
       let signature: SignatureComponent = getComponent(document.getElementById('signature'), 'signature');
       let sign: string = document.getElementById('text').value;
       signature.load(sign);
    }
    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={clickEventHandler} isPrimary={true}>Open</ButtonComponent>
                </div>
                <div id="signature-control">
                    <SignatureComponent id='signature'/>
                </div>
            </div>
        </div>
    );
};
export default App;
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.

index.jsx

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";
function App() {
    let dialogInstance;
    const animationSettings = { effect: 'Zoom', duration: 400, delay: 0 };
    function getSign() {
        let signature = getComponent(document.getElementById('signature'), 'signature');
        dialogInstance.content = signature.getSignature();
        dialogInstance.show();
    }
    return (<div id='container'>
            <div id="signature-control">
                <SignatureComponent id='signature'/>
            </div>
            <ButtonComponent id="save" cssClass='e-primary' content='Save as Base64' onClick={getSign}/>
            <DialogComponent id="defaultdialog" showCloseIcon={true} animationSettings={animationSettings} ref={dialog => dialogInstance = dialog} height='auto' header='Base64 of the signature' visible={false} width='80%'/>
        </div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

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, closest } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    let dialogInstance: DialogComponent;
    const  animationSettings: any = { effect: 'Zoom', duration: 400, delay: 0 };
    function getSign() {
        let signature: Signature = getComponent(document.getElementById('signature'), 'signature');
        dialogInstance.content = signature.getSignature();
        dialogInstance.show();
    }
    return (
        <div id='container'>
            <div id="signature-control">
                <SignatureComponent id='signature'/>
            </div>
            <ButtonComponent id="save" cssClass='e-primary' content='Save as Base64' onClick={getSign}/>
            <DialogComponent id="defaultdialog" showCloseIcon={true} animationSettings={animationSettings} ref={dialog => dialogInstance = dialog} height='auto' header='Base64 of the signature' visible={false} width='80%'/>
        </div>
    );
};
export default App;
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.

index.jsx

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";
function App() {
    let items;
    items = [
        {
            text: 'Png'
        },
        {
            text: 'Jpeg'
        },
        {
            text: 'Svg'
        }
    ];
    function onSelect(args) {
        let signature = getComponent(document.getElementById('signature'), 'signature');
        signature.save(args.item.text, 'Signature');
    }
    return (<div id='container'>
            <div>
                <span>Sign here</span>
                <SplitButtonComponent content="Save" iconCss='e-sign-icons e-save' items={items} select={onSelect}/>
            </div>
            <div id="signature-control">
                <SignatureComponent id='signature'/>
            </div>
        </div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

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";

function App() {
    let items: { text: string; }[];
    items = [
    {
        text: 'Png'
    },
    {
        text: 'Jpeg'
    },
    {
        text: 'Svg'
    }];

    function onSelect(args:MenuEventArgs ): void {
        let signature: Signature = getComponent(document.getElementById('signature'), 'signature');
        signature.save(args.item.text as SignatureFileType, 'Signature');
    }
    return (
        <div id='container'>
            <div>
                <span>Sign here</span>
                <SplitButtonComponent content="Save" iconCss='e-sign-icons e-save' items={items} select={onSelect} />
            </div>
            <div id="signature-control">
                <SignatureComponent id='signature'/>
            </div>
        </div>
    );
};
export default App;
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.

index.jsx

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";
function App() {
    let items;
    items = [
        {
            text: 'Png'
        },
        {
            text: 'Jpeg'
        },
        {
            text: 'Svg'
        }
    ];
    function onSelect(args) {
        let signature = getComponent(document.getElementById('signature'), 'signature');
        signature.save(args.item.text, 'Signature');
    }
    return (<div id='container'>
            <div>
                <span>Sign here</span>
                <SplitButtonComponent content="Save" iconCss='e-sign-icons e-save' items={items} select={onSelect}/>
            </div>
            <div id="signature-control">
                <SignatureComponent id='signature' backgroundColor="rgb(103 58 183)" saveWithBackground={true}/>
            </div>
        </div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

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";

function App() {
    let items: { text: string; }[];
    items = [
    {
        text: 'Png'
    },
    {
        text: 'Jpeg'
    },
    {
        text: 'Svg'
    }];
    function onSelect(args:MenuEventArgs ): void {
        let signature: Signature = getComponent(document.getElementById('signature'), 'signature');
        signature.save(args.item.text as SignatureFileType, 'Signature');
    }
    return (
        <div id='container'>
            <div>
                <span>Sign here</span>
                <SplitButtonComponent content="Save" iconCss='e-sign-icons e-save' items={items} select={onSelect} />
            </div>
            <div id="signature-control">
                <SignatureComponent id='signature' backgroundColor="rgb(103 58 183)" saveWithBackground={true}/>
            </div>
        </div>
    );
};
export default App;
ReactDOM.render(<App />, document.getElementById('element'));