一、效果圖
注意：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
代碼
<?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 );//輸出檔案;
?>
![Centos 7 Apache配置虛拟主機[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)