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 );//输出文件;
?>

jSignature网页手写签名相关推荐

HTML5+jSignature插件手写签名生成图片并转换成文件流实现功能
公司需求html5手写签名,并转换成图片上传服务器项目结构:jquery+springboot项目需要引入js文件:jquery的jquery.min.js .jSignature插件的 jSign ...
HTML5+jSignature插件手写签名生成图片并转换成文件流实现服务器上传功能
简介项目结构:html+vue+springboot html引入VUE项目vue.min.js.jQuery的jquery-3.4.1.min.js,签名:modernizr.js.jSignat ...
web 前端签名插件_手写签名插件—jSignature
jSignature 是一个通过捕捉笔画的矢量轮廓输出多种格式数据的jQuery插件,通过该插件我们可以实现绘画板.手写签名等功能. 使用该插件需要引入 jQuery 和jSignature.js,首 ...
手写签名插件—jSignature使用心得
最近需要做一个移动端手写签名的功能,上网搜了一下基本都是jSignature这个插件,几乎没得第二选择,于是照着网上的各个版本copy测试,在PC端测试是没什么问题的,很easy. 问题1::在移动端 ...
JSignature手写签名的实现（JQuery实现手写电子签名）
JSignature手写签名的实现 jSignature.js是实现手写签名的插件,由于jSignature.js是基于jQuery的,所以使用时需要先引入jQuery. 具体使用方法如下: 第一步, ...
php jSignature,jSignature手写签名
手写板签名demo 请按着鼠标写字签名. $(function() { var $sigp = $("#signature"); $sigp.jSignature(); // 初始 ...
页面手写签名插件 jSignature.min.js 使用实例
页面手写签名插件 jSignature.min.js 使用实例 jSignature.min.js 插件下载页面使用demo <!DOCTYPE html> <html xmlns ...
jsignature插件实操，完成手写签名图片格式功能
jSignature是什么,如何使用? jSignature是一个H5基于canvas画布得一个插件可以用于手机,浏览器进行手写签名功能实现啦 Jsignature使用效果展示注:本插件最新版是支持 ...
Android 电子签名，手写签名案列实现方法，并上传网页显示（base64）！
最近说项目可能会用到一个电子签名,不需要识别的那种,只是一个单纯手写签名,然后以base64的格式提供给前端web页面.其实挺简单的,自定义一个手写view就上线了.Android 电子签名,手写签名 ...
使用jSignature生成手写数字签名并保存为图片
1.调用jSignature插件生成手写数字签名头部记得先引用jquery,再引用jSignature的js文件,html网页源码如下: <!DOCTYPE html> <html ...

jSignature网页手写签名

一、效果图

二、前端

三、后台

四、下载手写签名图片

jSignature网页手写签名相关推荐

最新文章

热门文章