<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<!--<meta name="viewport" content="initial-scale=1.0, target-densitydpi=device-dpi" />-->
<!-- this is for mobile (Android) Chrome -->
<!--<meta name="viewport" content="initial-scale=1.0, width=device-height">-->
<!-- mobile Safari, FireFox, Opera Mobile -->
<script src="js/libs/"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="libs/"></script>
<![endif]-->
<style type="text/css">
/*div {
margin-top: 1em;
margin-bottom: 1em;
}*/
input {
padding: .5em;
margin: .5em;
}
select {
padding: .5em;
margin: .5em;
}
#signatureparent {
color: #000;
background-color: #fff;
/*max-width:600px;*/
padding: 10px;
width: 100%;
}
/*This is the div within which the signature canvas is fitted*/
#signature {
border: 1px dotted #3eaed2;
background-color: #ececec;
height: 200px;
width: 100%;
}
/* Drawing the 'gripper' for touch-enabled devices */
html.touch #content {
float: left;
width: 92%;
}
/* #scrollgrabber {
float: right;
width: 4%;
margin-right: 2%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAAAAACh79lDAAAAAXNSR0IArs4c6QAAABJJREFUCB1jmMmQxjCT4T/DfwAPLgOXlrt3IwAAAABJRU5ErkJggg==)
}*/
html.borderradius #scrollgrabber {
border-radius: 1em;
}
.signature .jSignature{height: 100%;}
</style>
</head>
<body style="background-color: #fff;">
<div id="content" style="width: 100%;">
<p>说明：
服务器端用的thinkphp，这里只是个控制器，单独使用无效的，
如果不知道控制器该放在什么位置，请自行百度。自行拼接请求服务器的完整的网址。
</p>
<p style="padding-left: 10px;margin-top:10px;margin-bottom: 5px;">请在虚线框内签名，完毕后点击“保存”。</p>
<div id="signatureparent">
<div id="signature"></div>
</div>
<div style="text-align: center;">
<input type="button" name="btnReset" id="btnReset" value="重写" />
<input type="submit" class="" name="btnSave" id="btnSave" value="保存签名" />
</div>
</div>
<script src="libs/jquery1.10."></script>
<script type="text/javascript">
();
</script>
<script>
/* @preserve
jQuery pub/sub plugin by Peter Higgins (dante@)
Loosely based on Dojo publish/subscribe API, limited in scope. Rewritten blindly.
Original is (c) Dojo Foundation 2004-2010. Released under either AFL or new BSD, see:
/license for more information.
*/
(function($) {
var topics = {};
$.publish = function(topic, args) {
if(topics[topic]) {
var currentTopic = topics[topic],
args = args || {};
for(var i = 0, j = currentTopic.length; i < j; i++) {
currentTopic[i].call($, args);
}
}
};
$.subscribe = function(topic, callback) {
if(!topics[topic]) {
topics[topic] = [];
}
topics[topic].push(callback);
return {
"topic": topic,
"callback": callback
};
};
$.unsubscribe = function(handle) {
var topic = handle.topic;
if(topics[topic]) {
var currentTopic = topics[topic];
for(var i = 0, j = currentTopic.length; i < j; i++) {
if(currentTopic[i] === handle.callback) {
currentTopic.splice(i, 1);
}
}
}
};
})(jQuery);
</script>
<script src="libs/"></script>
<script>
(function($) {
$(document).ready(function() {
// This is the part where jSignature is initialized.
var $sigdiv = $("#signature").jSignature({
'UndoButton': false
}),
// All the code below is just code driving the demo.
$tools = $('#tools'),
$extraarea = $('#displayarea'),
pubsubprefix = '.'
var export_plugins = $sigdiv.jSignature('listPlugins', 'export');
$("#btnSave").on("click",function(){
//可选格式：native,image,base30,image/jsignature;base30,svg,image/svg+xml,svgbase64,image/svg+xml;base64
var basedata = "data:"+$sigdiv.jSignature('getData', "image");
// ("basedata:"+basedata);
// $(".signResult").html(data);
//server是我自定义的，值为/?g=user&m=jk
//这样就能拼接完整的请求路径了。
var weburl=server+"&a=make_sign";
var jsdata={imgbase:basedata};
$.ajax({
type:"post",
url:weburl,
async:true,
data:jsdata,
dataType:"json",
success:function(data){
console.log(JSON.stringify(data));
if(data.success){
console.log(data.msg);
}
else{
console.log(data.msg);
}
}
});
// if(<100){
//本来这里想判断是否为空的，发现什么都不写时，竟然也有数据，应该是底板的编码了
// ("请重新签名");
// }
});
$("#btnReset").on("click",function(){
$sigdiv.jSignature('reset');
});
})
})(jQuery)
</script>
</body>
</html>