PHP+js完美实现生成签名图且自动保存图片路径并下载(完整版demo 支持各种图片格式)
php和js组合一起实现一个在线生成签名图片的功能，该功能很强大，主要有以下特点：1.支持自动保存图片路径;2.支持签名图片下载下来；3.支持撤销重写；4.兼容pc/移动各大主流浏览器。部分代码展示如下
预览截图
应用介绍
php和js组合一起实现一个在线生成签名图片的功能，该功能很强大，主要有以下特点：1.支持自动保存图片路径;2.支持签名图片下载下来；3.支持撤销重写；4.兼容pc/移动各大主流浏览器。部分代码展示如下：
html代码
<!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" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/css.css">
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/jSignature.min.js"></script>
<script>
$(function() {
var $sigdiv = $("#signature");
// $sigdiv.jSignature(); // 初始化jSignature插件-属性用","隔开
$sigdiv.jSignature({'decor-color':'transparent','lineWidth':"6"}); // 初始化jSignature插件-设置横线颜色
// $sigdiv.jSignature({'lineWidth':"6"});// 初始化jSignature插件-设置横线粗细
// $sigdiv.jSignature({"decor-color":"transparent"});// 初始化jSignature插件-去掉横线
// $sigdiv.jSignature({'UndoButton':true});// 初始化jSignature插件-撤销功能
// $sigdiv.jSignature({'height': 100, 'width': 200}); // 初始化jSignature插件-设置书写范围(大小)
$("#yes").click(function(){
//将画布内容转换为图片
var datapair = $sigdiv.jSignature("getData", "image");
$("#images").attr('src','data:' + datapair[0] + "," + datapair[1]);
//$("#box-info").hide();
});
$("#download").click(function(){
var src_data = $("#images").attr('src');
// console.log(src);
if(src_data){
$.ajax({
type:'post',
url:'./base64.php',
data:{src_data:src_data},
async:false,
success:function(data){
// console.log(data);
if(data){
//alert(data);
alert('生成签名成功！');
}else{
alert('生成失败！');
}
}
});
}else{
alert('图片不能为空！');return false;
}
});
$("#reset").click(function(){
$("#signature").jSignature("reset"); //重置画布，可以进行重新作画
$("#images").attr('src','');
});
});
</script>
</head>
<body>
<div class="container" id="box-info">
<div class="box1">
<div id="signature"></div>
</div>
<div class="box2">
<span>在上方框内签名</span>
<input type="button" value="确认" id="yes" class="btn btn-default pull-right btn-primary" style="width: 100px;font-size: 20px;"/>
<!--<input type="button" value="下载" id="download" class="btn btn-default pull-right btn-danger" style="width: 100px;font-size: 20px;"/>-->
<input type="button" value="重写" id="reset" class="btn btn-default pull-right " style="width: 100px;font-size: 20px;"/>
</div>
<div id="someelement" style="display: none;"><img src="" id="images"></div>
</div>
</body>
</html>©软件著作权归作者所有。本站所有软件均来源于网络，仅供学习使用，请支持正版！
转载请注明出处： 羊皮书 » PHP+js完美实现生成签名图且自动保存图片路径并下载(完整版demo 支持各种图片格式)
这个php在生成线签名功能果然很强大，支持各种格式，钥匙java版本的就好了。