H5手写签名canvas（附源码）

效果图：

图片保存到服务器为png格式，一般10k左右。

这个功能适用于H5app，或者H5，或者pc网页端（IE9以上，支持canvas），

低端安卓机依然不支持，具体低端到什么程度，没有经过测试。

下边上代码，前端HTML：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">--><!--<meta name="viewport" content="initial-scale=1.0, target-densitydpi=device-dpi" />--><!-- this is for mobile (Android) Chrome --><!--<meta name="viewport" content="initial-scale=1.0, width=device-height">--><!--  mobile Safari, FireFox, Opera Mobile  --><script src="js/libs/modernizr.js"></script><!--[if lt IE 9]><script type="text/javascript" src="libs/flashcanvas.js"></script><![endif]--><style type="text/css">/*div {margin-top: 1em;margin-bottom: 1em;}*/input {padding: .5em;margin: .5em;}select {padding: .5em;margin: .5em;}#signatureparent {color: #000;background-color: #fff;/*max-width:600px;*/padding: 10px;width: 100%;}/*This is the div within which the signature canvas is fitted*/#signature {border: 1px dotted #3eaed2;background-color: #ececec;height: 200px;width: 100%;}/* Drawing the 'gripper' for touch-enabled devices */html.touch #content {float: left;width: 92%;}/*html.touch #scrollgrabber {float: right;width: 4%;margin-right: 2%;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAAAAACh79lDAAAAAXNSR0IArs4c6QAAABJJREFUCB1jmMmQxjCT4T/DfwAPLgOXlrt3IwAAAABJRU5ErkJggg==)}*/html.borderradius #scrollgrabber {border-radius: 1em;}.signature .jSignature{height: 100%;}</style></head><body style="background-color: #fff;"><div id="content" style="width: 100%;"><p>说明：服务器端用的thinkphp，这里只是个控制器，单独使用无效的，如果不知道控制器该放在什么位置，请自行百度。自行拼接请求服务器的完整的网址。</p><p style="padding-left: 10px;margin-top:10px;margin-bottom: 5px;">请在虚线框内签名，完毕后点击“保存”。</p><div id="signatureparent"><div id="signature"></div></div><div style="text-align: center;"><input type="button" name="btnReset" id="btnReset" value="重写" /><input type="submit" class="" name="btnSave" id="btnSave"  value="保存签名" /></div></div><script src="libs/jquery1.10.2.min.js"></script><script type="text/javascript">jQuery.noConflict();</script><script>/*  @preservejQuery pub/sub plugin by Peter Higgins (dante@dojotoolkit.org)Loosely based on Dojo publish/subscribe API, limited in scope. Rewritten blindly.Original is (c) Dojo Foundation 2004-2010. Released under either AFL or new BSD, see:http://dojofoundation.org/license for more information.*/(function($) {var topics = {};$.publish = function(topic, args) {if(topics[topic]) {var currentTopic = topics[topic],args = args || {};for(var i = 0, j = currentTopic.length; i < j; i++) {currentTopic[i].call($, args);}}};$.subscribe = function(topic, callback) {if(!topics[topic]) {topics[topic] = [];}topics[topic].push(callback);return {"topic": topic,"callback": callback};};$.unsubscribe = function(handle) {var topic = handle.topic;if(topics[topic]) {var currentTopic = topics[topic];for(var i = 0, j = currentTopic.length; i < j; i++) {if(currentTopic[i] === handle.callback) {currentTopic.splice(i, 1);}}}};})(jQuery);</script><script src="libs/jSignature.min.noconflict.js"></script><script>(function($) {$(document).ready(function() {// This is the part where jSignature is initialized.var $sigdiv = $("#signature").jSignature({'UndoButton': false}),// All the code below is just code driving the demo. $tools = $('#tools'),$extraarea = $('#displayarea'),pubsubprefix = 'jSignature.demo.'var export_plugins = $sigdiv.jSignature('listPlugins', 'export');$("#btnSave").on("click",function(){//可选格式：native,image,base30,image/jsignature;base30,svg,image/svg+xml,svgbase64,image/svg+xml;base64var basedata = "data:"+$sigdiv.jSignature('getData', "image");
//                      console.log("basedata:"+basedata);
//                      $(".signResult").html(data);//server是我自定义的，值为http://www.abc.com/index.php?g=user&m=jk//这样就能拼接完整的请求路径了。var weburl=server+"&a=make_sign";var jsdata={imgbase:basedata};$.ajax({type:"post",url:weburl,async:true,data:jsdata,dataType:"json",success:function(data){console.log(JSON.stringify(data));if(data.success){console.log(data.msg);}else{console.log(data.msg);}}});
//                      if(data.length<100){//本来这里想判断是否为空的，发现什么都不写时，竟然也有数据，应该是底板的编码了
//                          mui.toast("请重新签名");
//                      }});$("#btnReset").on("click",function(){$sigdiv.jSignature('reset');});})})(jQuery)</script></body></html>

服务端使用thinkphp：

<?php
namespace User\Controller;
use Common\Controller\HomebaseController;
class JkController extends HomebaseController {function make_sign(){$host=$_SERVER['HTTP_HOST'];//系统域名$base64=I("imgbase");$result=$this->base64_upload($base64);if($result!==false){$signUrl=$host.$result;$rtn='{"success":true,"msg":"保存成功","signurl":"http://'.$signUrl.'"}';}else{$rtn='{"success":false,"msg":"签名保存失败"}';}echo $rtn;}//保存base64为图片function base64_upload($base64) {$base64_image = str_replace(' ', '+', $base64);//post的数据里面，加号会被替换为空格，需要重新替换回来，如果不是post的数据，则注释掉这一行//上一行是注释好像没有意义，测试后发现，post来的数据，并没有把+替换为空格if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image, $result)){//匹配成功if($result[2] == 'jpeg'){$image_name = uniqid().'.jpg';//纯粹是看jpeg不爽才替换的}else{$image_name = uniqid().'.'.$result[2];}$img_url="/Uploads/".date("Ymd")."/";//目录要有可写权限，一般给user全部权限就行了。if(!is_dir("./".$img_url)){mkdir("./".$img_url);}$image_file = $img_url.$image_name;//服务器文件存储路径//  ./这才是指向根目录的if (file_put_contents(".".$image_file, base64_decode(str_replace($result[1], '', $base64_image)))){return $image_file;}else{return false;}}else{return false;}}
}

这是控制器，具体位置不用细说了吧。

注意：demo里，有个地方需要修改，就是控制器的33和34行，路径前面要加上./，这样才能指向根目录。

修改后如下：

if(!is_dir("./".$img_url)){mkdir("./".$img_url);
}

完整的demo下载路径：https://download.csdn.net/download/moniteryao/10639108

js插件来源：http://www.jq22.com/jquery-info13488

H5手写签名canvas（附源码）相关推荐

安卓带步骤的手写签名（附源码）
之前写的一个带笔画记录功能的安卓画板,最近才有时间写个博客好好介绍一下,参考了一些博客,最后使用了 kotlin 实现的,虽然用起来很爽,可是过了一段时间再看自己都有点懵,还好当时留下的注释非常多,有 ...
OpenCV+TensorFlow图片手写数字识别(附源码)
初次接触TensorFlow,而手写数字训练识别是其最基本的入门教程,网上关于训练的教程很多,但是模型的测试大多都是官方提供的一些素材,能不能自己随便写一串数字让机器识别出来呢?纸上得来终觉浅,带着这 ...
2021年最新开运算命网运势测算带塔罗牌含H5手机端整站PHP源码
源码介绍 2021年最新开运算命网运势测算带塔罗牌含H5手机端整站PHP源码,这个开运网源码前一阵子流行过一段时间,各大论坛也都陆陆续续发过一些,但是大部分不是不完整就是支付只有官方接口,用起来成本高 ...
一起手写Vue3核心模块源码，掌握阅读源码的正确方法
最近和一个猎头聊天,说到现在前端供需脱节的境况.一方面用人方招不到想要的中高级前端,另一方面市场上有大量初级前端薪资要不上价. 特别是用 Vue 框架的,因为好上手,所以很多人将 Vue 作为入门框架 ...
小程序-手写签名（附代码）
方法不是我自己写的,但是也忘记最初的原版出自于哪里了,不过搜索下来就是大同小异,我就附上自己实测有效的!可以直接拿了用,只不过最后保存手写签名图片的方法自己写就可以了,用的就是小程序的图片上传方法. ...
丝滑流畅的手写签名 canvas 2d
在最近的小程序项目中,设计师又给我出难题了,需要在小程序里面实现一个手写签名功能,完成后将签名生成文件,上传的服务端去.手写签名不难,难在居然要我生成 svg,还有将签名功能搞得和画板一样,我是不能忍 ...
旷世神作，腾讯高工手写13万字JDK源码笔记，从底层远吗带你飙向实战
灵魂一问,我们为什么要学习JDK源码? 当然不是为了装,毕竟谁没事找事虐自己 ... 1.面试跑不掉.现在只要面试Java相关的岗位,肯定或多或少会会涉及JDK源码相关的问题. 2.弄懂原理才不慌.我 ...
（原创）WPF写的台球附源码
声明,此游戏的素材来源自中国游戏中心,此游戏仅作学习之用,如果你通过任何途径取得本游戏的源码,请勿用于商业用途,也是对我熬夜数次的劳动成果的尊重和对中游的尊重,谢谢. 转贴请标明出处,谢谢. 忆往昔, ...
用简单Java代码尝试在控制台写游戏（附源码）
尝试写了一个在Java控制台运行的代码游戏,由于写这个的时候,博主还没学到可视化界面,也没有学到面向对象,甚至没有集合,运用的全是之前C语言的语法,因此应该很容易看懂吧.末尾附上源码. 以下是效果展示 ...

H5手写签名canvas（附源码）

H5手写签名canvas（附源码）相关推荐

最新文章

热门文章