Number of pixels in a signature

[Arthur Butler]

Currently in my app, the user is allowed to just enter a few or even just one pixels as a signature.  I would like to prevent this and have some minimum number of pixels that they need to enter when signing.

I suggest that Syncfusion adds an API that will return the number of black pixels in the image and the total pixels so that we can make a judgement call about the signature.

[YuvanShankar Arunagiri]

Hi Arthur,

Sorry for the delay. We have prepared the sample based on your requirement. Using the JS Invoke method, we can get transparent(empty space) of canvas as percentage using the below code snippet.

[Index.razor]:

<div>

    <div class="e-sign-heading">

        <div class="e-btn-options">

            <SfButton id="open" CssClass="e-primary" @onclick="OnOpen">GetValidSign%</SfButton>

        </div>

    </div>

    <div class="e-sign-content">

        <SfSignature @ref="signature" style="width: 500px; height: 300px;"></SfSignature>

    </div>

</div>

 

@code{

    private SfSignature signature;

    private async void OnOpen()

    {

        double Pert = await JSRuntime.InvokeAsync<double>("GetValidSign");

    }

}

[_Layout.cshtml]:

<script>

        function GetValidSign() {

            var canvas = document.getElementsByClassName("e-signature")[0];

            const ctx = canvas.getContext("2d");

            const imageData = ctx.getImageData(0, 0, 500, 300);

            const nrOfPixels = imageData.data.length / 4; // rgba pixels

            let transparent = 0;

            for (let i = 3; i < imageData.data.length; i += 4) {

                transparent += imageData.data[i] ? 0 : 1;

            }

 

            return (transparent / nrOfPixels * 100);

        }

    </script>

Get back to us if you need any further assistance on this. 

Regards,

YuvanShankar A

Attachment: SignatureSample_195d3c33.zip

[Arthur Butler]

Thank you.

[YuvanShankar Arunagiri]

You are welcome, Arthur. Please get back to us if you need any further assistance on this.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.