jSignature.js 缩小画布后光标和笔迹不在一起

最新推荐文章于 2024-10-10 09:56:47 发布

Holle_CSDNs

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量119

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Holle_CSDNs/article/details/140380812

版权

 <div class="container">
            <div id="signatureparent">
                <!--画布-->
                <div id="signature"></div>
            </div>
            <div class="footer-btn">
                <a href="javascript:void(0)" title="下载" onclick="saveChange()" class="btn             
                    btn-mini btn-mini" style="padding: 10px 20px;margin-top: 20px;">保存</a>
                <a href="javascript:void(0)" title="下载" onclick="cleanupChnage()" class="btn btn-mini btn-mini" style="padding: 10px 20px;margin-top: 20px;">清除</a>
            </div>
        </div>
        <!--预览-->
       <div class="autograph">
         <img src="" href="img" />
       </div>



       var param= {
            width: '600px',//签名区域的宽
            height: '200px',//签名区域的高
            // cssclass: '',//画布的类 可以写自定义的样式
            UndoButton:false,//撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找
            signatureLine: false,//去除默认画布上那条横线
            lineWidth: '1' //画笔的大小
        };
        $('canvas').attr('width','600')  //这里很重要 ，要设置canvas的宽高与初始化的style里面的一致
        $("#signature").jSignature(param); //初始化、可设置画板参数


//清除

 function cleanupChnage(){
        $("#signature").jSignature("reset");
        $("[href=img]")[0].src = ''
    }


//保存
 function saveChange(){
        // 判断是否签名
        if( $("#signature").jSignature('getData', 'native').length === 0){
            return alert("请先进行签名");
        }
        //将签名的画布保存为base64编码字符串 默认是png的
        var datapair = $("#signature").jSignature("getData","image");
        var i = new Image();
        i.src = "data:" + datapair[0] + "," + datapair[1];
        $("[href=img]")[0].src = i.src
     
    }