目录
项目地址
上代码
前端代码
后端代码 (这里写两个简单的函数, 你可以使它更完善)
好了, 请自由发挥吧!
项目地址
开箱可用, 此项目的作者在代码中做了详细的注释.
https://github.com/941477276/Tablet/tree/master
上代码
将它集成到你的项目中需要四个文件.
为了更友好的弹窗提示, 这里引入 layer.JS https://layer.layui.com/
前端代码
- <!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" id="viewport" name="viewport">
- <meta name="format-detection" content="telephone=no, email=no" />
- <meta name="wap-font-scale" content="no">
- <meta name="apple-touch-fullscreen" content="yes" />
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />
- <meta name="HandheldFriendly" content="true">
- <meta name="MobileOptimized" content="320">
- <meta name="screen-orientation" content="portrait">
- <meta name="x5-orientation" content="portrait">
- <meta name="x5-page-mode" content="app">
- <meta name="msapplication-tap-highlight" content="no">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <title > 用户签名 </title>
- <link rel="stylesheet" href="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 class="container" id="container"></div>
- <script type="text/html" id="temp">
- <span class="save-canvas-to-img">
确认签名
- </span>
- </script>
- <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
- <script src="your-path/layer.js"></script>
- <script src="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 Windows ? "orientationchange" : "resize";
- Windows.addEventListener(evt,resize,false);
- Windows.orientation = 90;
- var oldOrientation = Windows.orientation;
- function resize(fals) {
- if(Windows.orientation !== oldOrientation) {
- Windows.document.location.reload()
- oldOrientation = Windows.orientation
- }
- if (Windows.orientation === 0 || Windows.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;
- }
好了, 请自由发挥吧!
来源: https://www.cnblogs.com/my3306/p/9895920.html