首页 > 代码库 > 用jq中jSignature做手动签名

用jq中jSignature做手动签名

2024-09-11 14:23:17   219人阅读

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>手写板签名demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="UTF-8">
    <meta name="description" content="overview & stats" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
</head>
<style>
    #qianMin input{
        width:30%;
        border-radius: 15px;
        border:1px #ccc solid;
    }
    #signature{
        width:90%;
        height:150px;
        border:1px solid #000;
        margin:0 auto;
        overflow: hidden;
        background-color:#fff;"
    }
    #someelement{
        width:90%;
        margin:0 auto;
    }
    #qianButton{
        text-align: center;
        width:250px;margin:0 auto;
        margin-top:20px;
    }
</style>
<body>
<div id="qianMin">
    <div id="signature"></div>
    <div id="someelement"></div>
    <div id="qianButton">
    <input type="button" value="http://www.mamicode.com/保存" id="yes"/>
    <input type="button" value="http://www.mamicode.com/重写" id="reset"/>
    </div>
</div>
<script src="http://www.mamicode.com/js/jquery-1.11.3.js"></script>
<script src="http://www.mamicode.com/js/flashcanvas.js"></script>
<script src="http://www.mamicode.com/js/jSignature.min.js"></script>
<script>
    $(function() {
        var dWidth = document.getElementById(‘signature‘).style.width;
        var $sigdiv = $("#signature");
        $sigdiv.jSignature({height:200,width:dWidth,lineWidth:"2",signatureLine:false});
        $("#yes").click(function(){
            //将画布内容转换为图片
            var datapair = $sigdiv.jSignature("getData", "image");
            var i = new Image();
            i.src = "data:" + datapair[0] + "," + datapair[1];
            $(i).appendTo($("#someelement")); // append the image (SVG) to DOM.
        });
        $("#reset").click(function(){
            $sigdiv.jSignature("reset"); //重置画布，可以进行重新作画.
            $("#someelement").html("");
        });
    });
//    function downloadFile(fileName, blob){
//        var aLink = document.createElement(‘a‘);
//        var evt = document.createEvent("HTMLEvents");
//        evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
//        aLink.download = fileName;
//        aLink.href = http://www.mamicode.com/URL.createObjectURL(blob);
//        aLink.dispatchEvent(evt);
//    }
//    function convertBase64UrlToBlob(urlData){
//        var bytes=window.atob(urlData.split(‘,‘)[1]);        //去掉url的头，并转换为byte
//        //处理异常,将ascii码小于0的转换为大于0
//        var ab = new ArrayBuffer(bytes.length);
//        var ia = new Uint8Array(ab);
//        for (var i = 0; i < bytes.length; i++) {
//            ia[i] = bytes.charCodeAt(i);
//        }
//        return new Blob( [ab] , {type : ‘image/png‘});
//    }
</script>
</body>
</html>
<!--settings = {-->
<!--‘width‘ : ‘ratio‘     定义画布的宽度。数值没有%或px-->
<!--,‘height‘ : ‘ratio‘   定义画布的高度。数值没有%或px-->
<!--,‘sizeRatio‘: 4 // only used when height = ‘ratio‘-->
<!--,‘color‘ : ‘#000‘      定义了中风在画布上的颜色。接受任何颜色的十六进制值-->
<!--,‘background-color‘: ‘#fff‘   定义了画布的背景颜色。接受任何颜色的十六进制值。-->
<!--,‘decor-color‘: ‘#eee‘-->
<!--,‘lineWidth‘ : 0       定义的厚度。接受任何积极的数值-->
<!--,‘minFatFingerCompensation‘ : -10-->
<!--,‘showUndoButton‘: false-->
<!--,‘readOnly‘: false-->
<!--,‘data‘: []-->
<!--,‘signatureLine‘: false-->
<!--}-->

用jq中jSignature做手动签名


联系
我们