jSignature网页手写签名

一、效果图

这里写图片描述
　　注意：1、CSS样式自己调，这里写的很简陋。
　　　　　2、单击下载，并不是下载图片，而是保存到后台。
　　　　　3、注意js的引用。

二、前端

<!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" /><script src="./js/jquery-2.0.3/jquery-2.0.3.min.js"></script><script src="./js/jSignature/jSignature.min.js"></script><script>$(function() {var $sigdiv = $("#signature");$sigdiv.jSignature(); // 初始化jSignature插件-属性用","隔开// $sigdiv.jSignature({'decor-color':'red'}); // 初始化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]);});$("#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 id="signature"></div><p style="text-align: center"><b style="color: red">请按着鼠标写字签名。</b></p><input type="button" value="保存" id="yes"/><input type="button" value="下载" id="download"/><input type="button" value="重写" id="reset"/><div id="someelement"><img src="" id="images"></div>
</body>
</html>

三、后台

<?php
/*  base64格式编码转换为图片并保存对应文件夹 */  
$base64_content = $_POST['src_data'];
// echo $base64_content;die;//截取数据为数组
$base64_content= explode(',',$base64_content); //生成目录：demo所在根目录下
// $new_file = "./".date('Ymd',time())."/";  
$new_file = date('Ymd',time())."/";  
if(!file_exists($new_file)){  //检查是否有该文件夹，如果没有就创建，并给予最高权限  mkdir($new_file, 0700);  
}//文件后缀名
$type = 'png';
//生成文件名：相对路径
$new_file = $new_file.time().".$type";//转换为图片文件
if (file_put_contents($new_file,base64_decode($base64_content[1]))){echo $new_file;  
}else{ return false;  
}  ?>

四、下载手写签名图片

1、前端代码

$.ajax({type:'post',url:'./base64.php',data:{src_data:src_data},async:false,dataType:'json',success:function(data){if(data){//跳转下载链接window.location.href = data.url;// alert('生成签名成功！');}else{alert('生成失败！');}}
});

2、后台base64.php代码

<?php
header('Content-Type:text/html,charset=utf-8');
/*  base64格式编码转换为图片并保存对应文件夹 */  
$base64_content = $_POST['src_data'];
// echo $base64_content;die;//截取数据为数组
$base64_content= explode(',',$base64_content); //生成目录：demo所在根目录下
// $new_file = "./".date('Ymd',time())."/";  
$new_file = date('Ymd',time())."/";  
if(!file_exists($new_file)){  //检查是否有该文件夹，如果没有就创建，并给予最高权限  mkdir($new_file, 0700);  
}//文件后缀名
$type = 'png';
//生成文件名：相对路径
$new_file = $new_file.time().".$type";//转换为图片文件并返回图片链接
if (file_put_contents($new_file,base64_decode($base64_content[1]))){$url = $_SERVER['HTTP_REFERER'].'/download.php?url='.$new_file;$result['url'] = $url;$result['status'] = 1;echo json_encode($result);die;		
}else{$result['status'] = 0;echo json_encode($result);die; 
}

3、后台download.php代码

<?phpheader('Content-Type:text/html,charset=utf-8');//下面是输出下载;// ob_end_clean();//清除缓存以免乱码出现// echo 1111;die;$new_file = $_GET['url'];// var_dump($new_file);die;header ( "Cache-Control: max-age=0" );header ( "Content-Description: File Transfer" );header ( 'Content-disposition: attachment; filename='.basename($new_file)); //文件名header ( "Content-Type: application/png" ); //文件格式:pngheader ( "Content-Transfer-Encoding: binary" ); // 告诉浏览器，这是二进制文件header ( 'Content-Length: ' . filesize ( $new_file ) ); //告诉浏览器,文件大小@readfile ( $new_file );//输出文件;
?>