开箱可用, 此项目的作者在代码中做了详细的注释。
https://github.com/941477276/Tablet/tree/master
上代码将它集成到你的项目中需要四个文件。
Tablet-1.0.js
colpick.css
jquery.min.js
为了更友好的弹窗提示，这里引入 layer.js
前端代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta content="telephone=no, email=no" /> <meta content="no"> <meta content="yes" /> <meta content="black" /> <meta content="true"> <meta content="320"> <meta content="portrait"> <meta content="portrait"> <meta content="app"> <meta content="no"> <meta content="yes"> <meta content="black"> <title>用户签名</title> <link href="http://www.likecs.com/your-path/colpick.css" /> <style> body,canvas{ padding: 0; margin: 0; background-color: #f0f0f0; } *{ box-sizing: border-box; padding: 0; margin: 0; } .container{ height: 100%; } .container .-tablet, .container .-tablet-container, .container .-canvas-wrapper{ height: 100%; } /* 签字板横屏处理*/ @media all and (orientation : portrait) { .layui-m-layermain { transform: rotate(90deg) !important; } } </style> </head> <body> <div></div> <script type="text/html"> <span> 确认签名 </span> </script> <script src="http://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> <script src="http://www.likecs.com/your-path/layer.js"></script> <script src="http://www.likecs.com/your-path/Tablet-1.0.js"></script> <script> let tablet; $(function (){ tablet = new Tablet("#container",{ defaultColor: "#000", //笔的默认颜色 otherHtml: $("#temp").html(), //外部功能小部件 response: true, //开启响应式 onInit: function (){ let that = this, container = this.container; container.find(".save-canvas-to-img").on("click", function (){ /* 直接获取 base64 编码的图片*/ let signImg = that.getBase64() console.log(signImg) layer.open({ content: '确定提交自己的个人签名么？' ,btn: ['确定', '取消'] ,yes: function(index){ layer.close(index) $.ajax({ url: "your-url", method: 'post', data: { signImg: signImg }, success: function(data) { /* 这里返回数据根据你的实际情况处理*/ let status = data.result.status let result = data.result.result if (status === 200) { layer.open({ time: 1, title: [ '提示信息', 'background-color: green; color:#fff;' ] ,content: result.toString() }); } else { layer.open({ time: 1, title: [ '提示信息', 'background-color: #FF4351; color:#fff;' ] ,content: result.toString() }); } }, error: function (error) {} }) that.clear() },no: function (index) { layer.close(index) that.clear() } }) }) } }); /* 横屏处理，这里简单粗暴，如果屏幕转动，直接重载页面。*/ var evt = "onorientationchange" in window ? "orientationchange" : "resize"; window.addEventListener(evt,resize,false); window.orientation = 90; var oldOrientation = window.orientation; function resize(fals) { if(window.orientation !== oldOrientation) { window.document.location.reload() oldOrientation = window.orientation } if (window.orientation === 0 || window.orientation === 180) { tablet.rotate(90); } } resize(true); }); </script> </body> </html> 后端代码（这里写两个简单的函数，你可以使它更完善） /* 处理 ajax 传来的 base64编码*/ function userSignData($signImg) { $dest = 'your-path/signImg'.uniqid().'.png'; $base64 = explode(',', $signImg); /* 这里默认当成 png 处理了，处女座请自己完善*/ $pngCode = base64_decode(end($base64)); file_put_contents($dest, $pngCode); $res = compressImg($dest, $dest, 0.5); if ($res) { /* 这里就是压缩后的图片编码*/ $base64NewImg = base64_encode(file_get_contents($dest)); /* 删除保存的图片，当然你可以不删除，注释以下即可*/ unlink($dest); return ['status' => 200, 'result' => '已提交签名']; } else { return ['status' => 500, 'result' => '巴拉巴拉巴拉']; } } /* 压缩图片*/ function compressImg($source, $dest, $quality = 0.7) { // 判断原图是否存在 if(!file_exists($source)){ return false; } // 获取原图信息 list($owidth, $oheight, $otype) = getimagesize($source); $newWidth = $owidth * $quality; $newHeight = $oheight * $quality; /* 由于签名是透明背景的 png，这里创建一个透明背景的新图*/ $newImg = imagecreatetruecolor($newWidth, $newHeight); $color=imagecolorallocate($newImg,255,255,255); imagecolortransparent($newImg,$color); imagefill($newImg,0,0,$color); switch($otype){ case 1: $source_img = imagecreatefromgif($source); break; case 2: $source_img = imagecreatefromjpeg($source); break; case 3: $source_img = imagecreatefrompng($source); break; default: return false; } imagecopyresampled($newImg, $source_img, 0, 0, 0, 0, $newWidth, $newHeight, $owidth, $oheight); // 生成图片 switch($otype){ case 1: imagegif($newImg, $dest); break; case 2: imagejpeg($newImg, $dest); break; case 3: imagepng($newImg, $dest); break; } imagedestroy($source_img); imagedestroy($newImg); return is_file($dest)? true : false; } 好了，请自由发挥吧！