JS实现web签名

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011872945/article/details/65447008

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>
    <!--
    jSignature 在网页上手写签名的插件(html5手写签名) 在IE7~IE8这种不支持HTML5的浏览器上,是利用Flash嵌入的方式实现的签名处理;
    在支持的HTML5的浏览器上默认采用canvas标签处理签名,可以生成 PNG格式、SVG格式的签名图片。
    非常适合在IPAD等移动客户端上实现手写签名的,该插件基于JQuery。
    注意FlashCanvas 是有两个文件组成的,需要放在同一个文件夹下,不要单独存放,因为他们是协同工作的

    首先在需要引入的文件中引入你的jQuery插件地址,然后再引入jSignature插件的存放位置
    -->
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<!--    <script src="Scripts/jSignature/jSignature.min.js" type="text/javascript"></script>-->
    <!--处理版本低于IE9的浏览器,支持IE7、IE8,使用Flash实现-->
    <script src="Scripts/jSignature/flashcanvas.js" type="text/javascript"></script>
    <!--处理支持H5的浏览器,使用canvas,非压缩吧,去掉了其中的签字横线,可以使用jSignature.min.js 看看两者的区别-->
    <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>

代码下载

阅读更多

没有更多推荐了,返回首页