Jquery image annotation Asp.net

Hello experts,
I want to annoate images like DocuSign does. I want to place signature field/ name fields exactly like docusign (at the time of sending document to other user.)
LVL 8
Johny BravoAsked:
Who is Participating?
 
kblauCommented:
here is the link to download signature jquery plugin:
http://thomasjbradley.ca/lab/signature-pad/
here is the code mvc4 you might have to modify it if you are not using mvc4:
Make sure you have jquery referenced
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
@section scripts{
   
@*<script src="~/Scripts/flashcanvas.js"></script>*@
<script src="~/Scripts/jquery.signaturepad.min.js"></script>
<script src="~/Scripts/json2.min.js"></script>
<link href="~/Content/jquery.signaturepad.css" rel="stylesheet" />
    <script type="text/javascript">
        $("p").click(function ()
        {
            $(this).slideUp();
        });

        $(document).ready(function () {
            $('.sigPad').signaturePad();
        });


    </script>
}

<p>ap</p><p>dh</p><p>fortech</p>
<object type="application/x-shockwave-flash" data="flashcanvas.swf" width="50" height="40">
    <param name="movie" value="flashcanvas.swf" />
</object>

<form method="post" action="" class="sigPad">
    <label for="name">Print your name</label>
    <input type="text" name="name" id="name" class="name">
    <p class="typeItDesc">Review your signature</p>
    <p class="drawItDesc">Draw your signature</p>
    <ul class="sigNav">
        <li class="typeIt"><a href="#type-it" class="current">Type It</a></li>
        <li class="drawIt"><a href="#draw-it">Draw It</a></li>
        <li class="clearButton"><a href="#clear">Clear</a></li>
    </ul>
    <div class="sig sigWrapper">
        <div class="typed"></div>
        <canvas class="pad" width="198" height="55"></canvas>
        <input type="hidden" name="output" class="output">
    </div>
    <button type="submit">I accept the terms of this agreement.</button>
</form>
0
 
kblauCommented:
Here is a screen shot.Signature.PNG
0
 
Johny BravoAuthor Commented:
Thanks kblau but I have this working of electronic signature.
What I want is to upload document and place sign at any position in the document
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Jason C. LevineNo oneCommented:
That's what PDF's are for.
0
 
Johny BravoAuthor Commented:
Hi Jason,

What I mean is user should be able to drag and drop digital signature on pdf which is displayed in the browser.
0
 
Johny BravoAuthor Commented:
This is an answer for electronic signature. I ended up using third party digital sign service for my requirement. Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.