JS实现web签名

jSignature 在网页上手写签名的插件(html5手写签名) 在IE7~IE8这种不支持HTML5的浏览器上,是利用Flash嵌入的方式实现的签名处理;
在支持的HTML5的浏览器上默认采用canvas标签处理签名,可以生成 PNG格式、SVG格式的签名图片。
非常适合在IPAD等移动客户端上实现手写签名的,该插件基于JQuery

jSignature首页:http://willowsystems.github.io/jSignature/#/about/

主要代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>title>
    
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript">script>

    
    <script src="Scripts/jSignature/flashcanvas.js" type="text/javascript">script>
    
    <script src="Scripts/jSignature/jSignature.js" type="text/javascript">script>
    <script type="text/javascript">
        $(function () {
            $("#signature").jSignature();
           // $(".jSignature").css({ "width": "100%", "height": "100%" });
        });
        function reset() {
            var $sigdiv = $("#signature");
            $sigdiv.jSignature("reset");
        }
        function outputImage() {
            var $sigdiv = $("#signature");
            var datapair = $sigdiv.jSignature("getData", "image"); //设置输出的格式,具体可以参考官方文档

            var imagebase64 = datapair[1].replace(/\+/g, '%2B');

            $.ajax({
                type: "POST",
                url: "Default.aspx",
                data: "image=" + imagebase64,
                success: function (msg) {
                    var createImage = new Image();
                    createImage.src = msg;
                    $(createImage).appendTo($("#img_src"))
                }
            });

        }
        function jSignatureTest() {
            var $sigdiv = $("#signature");
            var datapair = $sigdiv.jSignature("getData", "image"); //设置输出的格式,具体可以参考官方文档

            var i = new Image();
            i.src = "data:" + datapair[0] + "," + datapair[1]
            $(i).appendTo($("#image")) // append the image (SVG) to DOM.
        }
    script>
head>
<body>
    <fieldset style="border: 2px solid green; width: 100%; height: 768px;">
        <legend>签名区域legend>
        <div id="signature" style="height: 100%;">
        div>
    fieldset>
    <button type="button" onclick="jSignatureTest()">
        输出签名button>
    <button type="button" onclick="reset()">
        重置button>
    <button type="button" onclick="outputImage()">
        生成Image图片button>
    <div id="image" style="margin: 20px">
    div>
    <div id="img_src">
    div>
body>
html>

代码下载

你可能感兴趣的:(jquery,JavaScript)