<html>
<head>
<title></title>
<meta charset="UTF-8">
<!--
jSignature 在网页上手写签名的插件(html5手写签名) 在IE7~IE8这种不支持HTML5的浏览器上，是利用Flash嵌入的方式实现的签名处理;
在支持的HTML5的浏览器上默认采用canvas标签处理签名，可以生成 PNG格式、SVG格式的签名图片。
非常适合在IPAD等移动客户端上实现手写签名的，该插件基于JQuery。
注意FlashCanvas 是有两个文件组成的，需要放在同一个文件夹下，不要单独存放，因为他们是协同工作的
首先在需要引入的文件中引入你的jQuery插件地址，然后再引入jSignature插件的存放位置
-->
<link rel="stylesheet" type="text/css" href="framework/bootstrap/css/bootstrap.min.css"/>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--处理版本低于IE9的浏览器，支持IE7、IE8,使用Flash实现-->
<script src="js/flashcanvas.js" type="text/javascript" charset="utf-8"></script>
<!--处理支持H5的浏览器,使用canvas,非压缩吧，去掉了其中的签字横线，可以使用jSignature.min.js 看看两者的区别-->
<script src="js/jSignature.min.js" type="text/javascript" charset="utf-8" ></script>
<script src="framework/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$("#signature").jSignature({height:300,width:1000,color:"#000",lineWidth:2});
// $(".jSignature").css({ "width": "100%", "height": "100%" });
});
function reset() {
var $sigdiv = $("#signature");
$sigdiv.jSignature("reset");
}
function outputImage() {
var $sigdiv = $("#signature");
var datapair = $sigdiv.jSignature("getData", "svgbase64"); //设置输出的格式，具体可以参考官方文档
var imagebase64 = datapair[1].replace(/\+/g, '%2B');
alert(datapair);
$.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", "svgbase64"); //设置输出的格式，具体可以参考官方文档
// var i = new Image();
//i.src = "data:" + datapair[0] + "," + datapair[1]
// $(i).appendTo($("#image")) // append the image (SVG) to DOM.
$("#img").attr("src","data:"+ datapair);
$("img").show();
}
</script>
</head>
<body>
<a href="#regDialog" style="margin-left:7px;" data-toggle='modal' >签字</a>
</div>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#regDialog">签字</button>
<button type="button" onclick="outputImage()">
生成Image图片</button>
<div id="image" style="margin: 20px">
</div>
<div></div>
<img id="img" >
</div>
<a href="#regDialog" data-toggle='modal' class="btn btn-default navbar-right">签名</a>
<div class="modal fade" id="regDialog">
<div class="modal-dialog " style="width:1000px">
<div class="modal-content ">
<div class="modal-header">
<button type="button" data-dismiss="modal" class="close">×</button>
<h4 class="modal-title"> <span class="glyphicon glyphicon-user"></span>签名</h4>
</div>
<div class="modal-body " >
<div id="signature" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="jSignatureTest()" data-dismiss="modal">确认</button>
<button type="button" class="btn btn-default" onclick="reset()">重置</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
bootstrap模态框+jSignature签字版
需积分: 50 45 浏览量
2018-05-14
12:04:45
上传
评论
收藏 515KB ZIP 举报
jSignatureDemo.zip （28个子文件） 
webapp 
index.html 4KB images js 
jquery-1.6.2.min.js 89KB flashcanvas.js 14KB jSignature.min.js 21KB jSignature.js 44KB jquery-1.8.3.min.js 91KB jquery.js 92KB jquery-1.8.2.min.js 91KB jSignature.min.noconflict.js 21KB
flashcanvas.swf 21KB jquery-1.9.0.min.js 91KB jquery-1.4.2.js 68KB jquery-1.7.2.min.js 93KB jquery-3.2.1.min.js 85KB framework bootstrap js bootstrap.min.css 114KB bootstrap.js 60KB bootstrap.min.js-1 35KB bootstrap.min.js 28KB fonts glyphicons-halflings-regular.ttf 44KB glyphicons-halflings-regular.woff2 18KB glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.svg 106KB glyphicons-halflings-regular.woff 23KB css bootstrap.min.css 114KB jquery flashcanvas.js 14KB jSignature.min.js 21KB modernizr.js 4KB jquery-3.2.1.min.js 85KB资源评论
