h5网页实现手写签字
以前是使用小程序来处理手写签字的问题，后来发现每做一个系统都需要申请一个小程序，而且小程序的审核时间实在是跟网页没法比啊。所以就搜索了一下html页面实现手写签字的方法。记录一下，以后方便自己用。
网上流行的一个基于jquery 的js插件。叫 jSignature.js 感谢 github 其实看他的有点儿懵，而且文件也比较多。其实我用到的也就是只有 一个文件 jSignature.js 而已。下面是代码。不要眨眼睛 我的代码里面用到了layui 可以根据情况自己剔除；
<div class="layui-form-item">
<label class="layui-form-label">店长签字：</label>
<div class="layui-input-block">
<a href="javascript:void(0);" class="layui-btn layui-btn-xs" onclick="openSign()">打开签字</a>
<div id="signImg"><if condition="$order['sign_path']"><img src="{$order.sign_path|sp_get_image_url}" alt=""></if></div>
<input type="hidden" name="sign_path" value="{$order.sign_path}">
</div>
</div>
<div id="signdiv" style="display:none;">
<div id="canvas"> </div>
</div>这里只用到一个 #canvas 的div。其他的都是打酱油的。后面要用到。
<script>
layui.use(["form",'layer'],function(){
form = layui.form
layer = layui.layer
});
function openSign(){
layer.open({
title:"店长签字",
type:1,
area:["100%","380px"],
content:$('#signdiv'),
success: function(layero, index){
$("#canvas").jSignature({width:"100%",height:260,"decor-color": "transparent",lineWidth: '2'});
},
btn:['完成','重置'],
yes:function(){
savePic();
},
btn2:function(){
resetCanvas();
return false;
}
});
}
function savePic(){
var $sigdiv = $("#canvas");
var length = $sigdiv.jSignature('getData', 'native').length;
//判断是否有签名
if(length == 0){
layer.msg('请先签名再提交',{icon:5});
return;
}
var datapair = $sigdiv.jSignature("getData");
$.ajax({
url:"{:U('asset/asset/base64_upload')}",
data:{base64:datapair,app:'sign'},
dataType:"json",
type:"POST",
success:function(res){
if(res.status == 1){
$('#signImg').html("<img src='"+res.preview_url+"'>");
$('input[name="sign_path"]').val(res.filepath);
}
}
});
layer.closeAll();
}
function resetCanvas(){
var $sigdiv = $("#canvas");
$sigdiv.jSignature("reset");
}
</script>JS部分写了三个方法 第一个openSign()是打开弹窗，让在弹窗里面签字，所以可以不用这么麻烦，我就说了那些多余的代码是打酱油的。真正的签字是第二个方法savePic() 这个方法就是将签字的生成图片然后异步上传到服务器，生成真是的网络地址。 resetCanvas() 就是没用的清除之前的签字重新签字的 用的时候看着办吧。因为savePic() 里面生成的签字图片是base64格式的 所以要写一个接受base64上传图片的后台方法。
public function base64_upload() {
$base64 = I("post.base64");
$app=I('post.app/s','');
if(!$app){
$app='default';
}else{
$app= strtolower($app);
}
$savepath= $app.'/'.date('Ymd').'/';
$uploadpath = './'.C("UPLOADPATH").$savepath;
if(!is_dir($uploadpath)){
$flag = mkdir($uploadpath,0777,true);
}
$base64_image = str_replace(' ', '+', $base64);
//post的数据里面，加号会被替换为空格，需要重新替换回来，如果不是post的数据，则注释掉这一行
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image, $result)){
//匹配成功
$image_name = uniqid().'.'.$result[2];
$image_file = $savepath.$image_name;
$file_path = $uploadpath.$image_name;
//服务器文件存储路径
if (file_put_contents($file_path, base64_decode(str_replace($result[1], '', $base64_image)))){
$url=C("TMPL_PARSE_STRING.__UPLOAD__").$image_file;
$this->ajaxReturn(array('preview_url'=>$url,'filepath'=>$image_file,'url'=>$url,'name'=>$image_name,'status'=>1,'message'=>'success'));
}else{
$this->ajaxReturn(array('name'=>'','status'=>0,'message'=>'error'));
return false;
}
}else{
$this->ajaxReturn(array('name'=>'','status'=>0,'message'=>'error2'));
return false;
}
}
}最主要的两段话
$base64_image = str_replace(' ', '+', $base64);
//post的数据里面，加号会被替换为空格，需要重新替换回来，如果不是post的数据，则注释掉这一行file_put_contents($file_path, base64_decode(str_replace($result[1], '', $base64_image)));
然后就保存成图片了。