jSignature网页手写签名

一、效果图

jSignature网页手写签名_第1张图片
  注意:1、CSS样式自己调,这里写的很简陋。
     2、单击下载,并不是下载图片,而是保存到后台。
     3、注意js的引用。

二、前端


<html lang="zh-CN">
<head>
    <title>手写板签名demotitle>
    <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>

三、后台


/*  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代码


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代码


	header('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" ); //文件格式:png
	header ( "Content-Transfer-Encoding: binary" ); // 告诉浏览器,这是二进制文件
	header ( 'Content-Length: ' . filesize ( $new_file ) ); //告诉浏览器,文件大小
	@readfile ( $new_file );//输出文件;
?>

你可能感兴趣的:(jQuery,php)