HelpBot Assistant

How can I help you?

Open save in React Signature component

21 Feb 202619 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 pre-drawn signatures using the load method. It supports PNG, JPEG, and SVG images as base64 strings or hosted/online URLs.

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'));
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 supports saving signatures in multiple formats: base64, blob, and image formats (PNG, JPEG, SVG).

Save as Base64

The getSignature method saves the signature as base64 in PNG, JPEG, or SVG format. The base64 output can be loaded back using the 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";
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'));
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 saves the signature as a Blob (binary data object) for storage in databases or transmission.

Save as Image

The save method saves the signature as an image file. It accepts filename and file type (PNG, JPEG, or SVG) as parameters. 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";
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'));
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 controls whether the signature is saved with its background. The default value is true, so signatures are saved with their background by default.

The following example sets the background color to ‘rgb(103 58 183)’ with save-with-background enabled.

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'));
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'));